Wie verwende ich jquery inject HTML Markup in jeder App?

Ich möchte HTML-Markup in ein div an mehreren Standorten in verschiedenen Plattformen injizieren. Im Idealfall würde es so aussehen, wo jeder Entwickler ein Skript-Tag in meine js einfügen kann. Lassen Sie uns annehmen, dass jede Anwendung bootstrap und jquery hat.Wie verwende ich jquery inject HTML Markup in jeder App?

<script id="globalheaderapi" src="https://www.url.com/globalheader.js"></script>

und html würde nur so etwas wie dies von den Anwendungen

<header id="globalHeader"></header>

Ich möchte zu meinem HTML-Markup innerhalb Header einfügen. Ich möchte auch js, um Verbindung zu css Quelle einzufügen.

Die Frage ist, die Apps haben nur jquery.

$(document).ready(function() { 
    //insert link to header css 
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />'); 

//insert html in div 
$("#globalHeader").html("<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>"); 
});

aktualisieren

versuchte ich $("#globalHeader").load(... und es funktioniert, wenn js und die App ist in der gleichen Domäne, wenn ich es in einer anderen Domäne versuchen, bekomme ich die crosssite Fehler

XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Quelle

2015-05-18 nolawi petros

Was mit dem, was ist los bist du schon tun? – Brad

Die Frage, die Sie stellen, scheint bereits von dem, was Sie tun, beantwortet zu werden. Was versuchst du noch zu erreichen? – Mortaza

das war ein Ausgangspunkt. Das Markup, das ich einfügen möchte, ist ziemlich lang. Ich habe mich nur gefragt, ob es eine Lösung gab, die Leute verwenden, um globale Kopf- und Fußzeilen zu erstellen. Wie eine API, die für mehrere Anwendungen funktioniert. –

Selbstverständlichkeit, dass es einen annehmbaren Grund in Ihrer Umgebung gibt, um nicht nur serverseitige Includes oder etwas einfacheres zu verwenden, scheint jQuerys .load() wie es Ihnen entsprechen würde. Sie würden nur den HTML-Stub Sie und jede Seite es nennen wie diese haben injizieren wollen würde:

$("#globalHeader").load('globalHeader.html');

Ihre CSS-Injektion sieht gut aus, aber ich bin neugierig, warum, wenn Sie Zugriff auf die Um ein Skript-Tag einzufügen, können Sie nicht einfach das Link-Tag hinzufügen.

Quelle

2015-05-21 14:21:44 swornabsent

Es gibt viele Mikro-Apps, die dieselbe Navigation wie meine Anwendung verwenden möchten. Sie befinden sich alle auf verschiedenen Plattformen. –

das funktioniert, wenn die HTML-Einfügung in der gleichen Domäne ist .. aber wenn ich es auf anderen Domänen teste-'XMLHttpRequest kann http nicht laden ... Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Herkunft 'Null' ist daher nicht erlaubt. " –

Wenn sie etwas anderes in diesem globalen Header haben, überschreibt .html() es.
Ein besserer Ansatz wäre es, Ihre Inhalte als Kinder anzuhängen.

var parentEl=$('#global-header'); 
var myDiv= $('<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>'); 
myDiv.appendTo(parentEl);

Ihre CSS-Link-Ergänzung sieht gut aus.

Quelle

2015-05-21 14:21:35 kaz

.html() akzeptiert Argumente, aber Bei jedem Aufruf von .html() mit einem neuen Argument wird der gesamte HTML-Code überschrieben. – Mortaza

Danke! Bearbeitet entsprechend. – kaz

Zunächst einmal nehmen Sie daran, dass, wenn Sie CSS-Link zu den Header fast alle modernen Browser, die CSS werden geladen und analysieren hängen, aber Sie haben keine Chance, wenn zu kennen. Dies bedeutet, dass Ihr injizierter HTML-Code während unvorhersehbarer Zeiträume nicht angezeigt werden kann.

Sie können versuchen, Inhalte zu verbergen und sie später mit einem .show() - Aufruf nach einer Zeitüberschreitung anzuzeigen, aber trotzdem (1) Die meiste Zeit verzögern Sie mehr als nötig und (2) oft nicht sei genug.

Also, wenn Ihre CSS nicht riesig ist, empfehle ich Ihnen, es mit jquery's .css() -Methode anzuwenden und dann eine .show() über Ihren Container.

In Bezug auf den Kreuzungsfehler mit .load(), ich denke, es gibt einen Parameter, um diese Warnung zu deaktivieren (aber ich erinnere mich nicht, was und nicht sicher, wenn 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).

Quelle

2015-05-22 12:01:28 bitifet

XMLHttpRequest funktioniert über verschiedene Domänen. 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:

$("#globalHeader").load("http://somedomain.com/path")

Der Code in somedomain.com Website ausgeführt wird, sollte die entsprechenden Header zurückgeben wie:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, POST, PUT 
Access-Control-Allow-Headers: Content-Type

Die erste Zeile Access-Control-Allow-Origin: * ermöglicht es, die Anfragen gemacht werden jede andere Domain. Sie können auch

Access-Control-Allow-Origin: micrositeA.com, micrositeB.com, micrositeC.com

Ihr HTTP-Server wie diese Domänen mit diesem Header begrenzen sollte OPTIONS Methode für diese zu arbeiten (sollte dies überprüfen) ermöglichen. Sie können in Ihrer http-Server-Dokumentation nachlesen, wie Sie dies erreichen können.

können Sie diesen Eintrag prüfen CORS (Cross-Site-HTTP-Requests)

How does Access-Control-Allow-Origin header work?

und

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Quelle

2015-05-27 23:17:34

danke, ich habe mich gefragt, wie man diesen Teil reparieren! –

Wie verwende ich jquery inject HTML Markup in jeder App?

Antwort

Verwandte Themen