come utilizzare jquery inject markup html in qualsiasi app?

Desidero inserire il markup html in un div in più siti su piattaforme diverse. Idealmente sarebbe simile a questo, in cui ogni sviluppatore può inserire un tag script sul mio js. Supponiamo che ogni applicazione abbia bootstrap e jquery.come utilizzare jquery inject markup html in qualsiasi app?

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

e html sarebbe solo qualcosa di simile alle applicazioni

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

voglio inserire il codice HTML all'interno di intestazione. Vorrei anche js inserire il link alla fonte css.

La domanda è, le app hanno solo 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>"); 
});

Aggiornamento

ho provato $("#globalHeader").load(... e funziona se js e l'applicazione è nello stesso dominio se provo in un dominio diverso ottengo l'errore crosssite

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

fonte

2015-05-18 nolawi petros

Cosa c'è di sbagliato con quello che stai già facendo? – Brad

La domanda che stai ponendo sembra essere già stata risolta da ciò che stai facendo. Cos'altro stai cercando di realizzare? – Mortaza

quello era un punto di partenza. il markup che voglio inserire è piuttosto lungo .. mi stavo chiedendo se ci fosse una soluzione che le persone stanno usando per creare header e footer globali .. come un api che funziona per più applicazioni –

Dando per scontato che ci sia un motivo abbastanza decente nel proprio ambiente per non usare solo il lato server include o qualcosa di più semplice, il .load() di jQuery sembra essere adatto a voi. Faresti solo spegnere il codice HTML che ci si vuole iniettare ed avere ogni pagina chiamare in questo modo:

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

l'iniezione CSS guarda bene, anche se sono curioso di sapere perchè se si ha accesso al sito per inserire un tag script non è possibile aggiungere il tag link.

fonte

2015-05-21 14:21:44 swornabsent

Ci sono molte micro app che vogliono usare la stessa navigazione della mia applicazione .. e sono tutte su piattaforme diverse. –

funziona se l'inserto html si trova nello stesso dominio .. ma quando lo provo su altri domini -' XMLHttpRequest non può caricare http ... Nessuna intestazione 'Access-Control-Allow-Origin-' è presente sulla risorsa richiesta. L'origine "null" non è quindi consentita accesso. –

Se hanno qualcos'altro in quell'intestazione globale, .html() lo sovrascriverà.
Un approccio migliore sarebbe quello di aggiungere i tuoi contenuti come bambini.

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);

L'aggiunta del collegamento CSS sembra buona.

fonte

2015-05-21 14:21:35 kaz

.html() accetta argomenti, ma sovrascrive l'intero codice HTML ogni volta che chiami .html() con un nuovo argomento. – Mortaza

Grazie! Modificato in modo appropriato. – kaz

Prima di tutto, tenere presente che se si aggiunge il collegamento css all'intestazione quasi tutti i browser moderni caricheranno e analizzeranno quel css, ma non si ha alcuna possibilità di sapere quando. Ciò significa che il tuo html iniettato può essere visualizzato senza un periodo di tempo imprevedibile.

Si può provare a mitigarlo e nasconderlo in seguito con una chiamata .show() dopo un timeout ma, comunque (1) La maggior parte del tempo ritarderà più del necessario e (2) molte volte potrebbe non essere abbastanza

Quindi, se il tuo css non è enorme, ti consiglio di applicarlo con il metodo .css() di jquery e quindi di fare uno .show() sul tuo contenitore.

Per quanto riguarda l'errore crosssite che utilizza .load(), penso che esista un parametro per disabilitare tale avviso (ma non ricordo cosa e non sono sicuro se ho torto). Tuttavia, è possibile implementare lo stesso comportamento semplicemente ottenendo il codice html tramite la chiamata .ajax() e quindi aggiungendo con .append() (o sostituendolo con .html()) al contenuto del contenitore.

fonte

2015-05-22 12:01:28 bitifet

XMLHttpRequest funziona in diversi domini. Tuttavia, il server deve essere configurato per consentire queste richieste.Il browser rifiuta questa richiesta dopo aver verificato un'intestazione HTTP.

Supponiamo che il vostro codice è del tipo:

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

Il codice in esecuzione in loco somedomain.com dovrebbe restituire le intestazioni appropriate come:

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

La prima riga Access-Control-Allow-Origin: * consente le richieste da effettuare da parte qualsiasi altro dominio. È inoltre possibile limitare questi domini con questo colpo di testa come

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

Il server http dovrebbe consentire metodo opzioni per questo al lavoro (dovrebbe controllare questo). È possibile consultare la documentazione del server http su come ottenere ciò.

È possibile controllare questa voce per CORS (Cross-site richieste HTTP)

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

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

fonte

2015-05-27 23:17:34

grazie, mi chiedevo come risolvere quella parte! –

come utilizzare jquery inject markup html in qualsiasi app?

risposta

Problemi correlati