Ich möchte HTML-Markup in ein div in mehreren Websites auf verschiedenen Plattformen einfügen. Im Idealfall würde es so aussehen, wo jeder Entwickler ein Skript-Tag in meine js einfügen kann. Nehmen wir an, dass jede Anwendung bootstrap und jquery hat.
%Vor%und html wäre nur so etwas in den Anwendungen
%Vor%Ich möchte mein HTML-Markup in die Kopfzeile einfügen. Ich möchte auch js, um Verbindung zu css Quelle einzufügen.
Die Frage ist, die Apps haben nur jquery.
%Vor%Aktualisieren
Ich habe versucht $( "#globalHeader" ).load(... und es funktioniert, wenn js und die App in der gleichen Domain ist, wenn ich es in einer anderen Domain versuche, bekomme ich die crosssite Fehler
Wir gehen davon aus, dass es in Ihrer Umgebung einen vernünftigen Grund gibt, nicht einfach serverseitige Includes oder etwas Einfacheres zu verwenden, jQuerys .load () scheint Ihnen zu gefallen. Sie würden einfach den HTML-Code ausgeben, den Sie injizieren möchten, und jede Seite wird so genannt:
$("#globalHeader").load('globalHeader.html');
Ihre CSS-Injektion sieht gut aus, obwohl ich neugierig bin, warum Sie, wenn Sie Zugriff auf die Site haben, um ein Skript-Tag einzufügen, nicht einfach das Link-Tag hinzufügen können.
Beachten Sie zunächst, dass, wenn Sie den css-Link an die Kopfzeile anhängen, fast alle modernen Browser diese css laden und parsen werden, aber Sie haben keine Chance zu wissen, wann . Dies bedeutet, dass Ihr injiziertes HTML während unvorhersehbaren Zeiträumen unsterblich dargestellt werden kann.
Sie können versuchen, den Inhalt zu verbergen und ihn später mit einem .show () - Aufruf nach einem Timeout anzuzeigen, aber trotzdem (1) Die meiste Zeit werden Sie mehr als nötig verzögern und (2) oft nicht genug.
Wenn also Ihr CSS nicht riesig ist, empfehle ich Ihnen, es mit der Methode .css () von jquery anzuwenden und dann eine .show () über Ihren Container zu machen.
In Bezug auf den Kreuzungsfehler mit .load (), denke ich, gibt es einen Parameter, um diese Warnung zu deaktivieren (aber ich weiß nicht, was und nicht sicher, ob ich falsch liege). Sie können jedoch dasselbe Verhalten implementieren, indem Sie einfach den HTML-Befehl via .ajax () abrufen und dann mit .append () an den Inhalt des Containers anhängen (oder ihn durch .html () ersetzen).
XMLHttpRequest funktioniert über verschiedene Domänen hinweg. Der Server sollte jedoch so konfiguriert sein, dass diese Anforderungen zugelassen werden. Der Browser verweigert diese Anfrage, nachdem er einen HTTP-Header überprüft hat.
Angenommen, Ihr Code ist wie folgt:
%Vor%Der Code, der auf der Website "somedomain.com" ausgeführt wird, sollte die entsprechenden Header wie folgt zurückgeben:
%Vor% Die erste Zeile Access-Control-Allow-Origin: * erlaubt die Anfragen von jeder anderen Domain. Sie können diese Domänen auch mit diesem Header begrenzen wie
Ihr http-Server sollte die OPTIONS-Methode zulassen, damit dies funktioniert (sollte dies prüfen). Sie können in Ihrer http-Server-Dokumentation nachlesen, wie Sie dies erreichen können.
Sie können diesen Eintrag für CORS (Cross-Site HTTP Requests) prüfen
Wie funktioniert die Access-Control-Allow-Origin-Kopfzeile?
und
Tags und Links javascript jquery