Inserimento dinamico di javascript nell'HTML che utilizza documento.scrivere

StackOverflow https://stackoverflow.com/questions/53945

  •  09-06-2019
  •  | 
  •  

Domanda

Io sono in fase di caricamento di un lightbox stile popup che carica è il codice HTML da un XHR chiamata.Questo contenuto viene quindi visualizzato in una "modale" popup utilizzando element.innerHTML = content Questo funziona come un fascino.

In un'altra sezione di questo sito, io uso Flickr 'badge' (http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/ per caricare le immagini di flickr in modo dinamico.Questo viene fatto tra un tag script che carichi su flickr javascript, che a sua volta fa un po ' di document.write statments.

Entrambi funzionano perfettamente quando è incluso nel codice HTML.Solo quando si carica il codice del badge di flickr all'interno il lightbox, il contenuto non viene eseguito il rendering di tutti.Sembra che l'utilizzo innerHTML per scrivere document.write dichiarazioni sta prendendo un passo di troppo, ma non riesco a trovare nessun indizio in implementazioni di javascript (FF2 E 3, IE6 e 7) di questo comportamento.

Qualcuno può chiarire se questo dovrebbe o non dovrebbe funzionare?Grazie.

È stato utile?

Soluzione

In generale, i tag script non viene eseguito quando si usa innerHTML.Nel tuo caso, questo è un bene, perché il document.write chiamata potrebbe cancellare tutto ciò che è già nella pagina.Tuttavia, che ti lascia senza qualsiasi documento HTML.scrivi doveva aggiungere.

jQuery, HTML manipolazione metodi di esecuzione di script in HTML per voi, il trucco è quindi l'acquisizione di chiamate al document.write e il codice HTML nella posizione corretta.Se è abbastanza semplice, quindi qualcosa di simile a questo farà:

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

È complicato però.Se lo script è su un altro dominio, esso verrà caricato in modo asincrono, quindi dovrete attendere fino a che è fatto per ottenere il contenuto.Inoltre, cosa succede se si scrive il codice HTML nel mezzo del frammento senza un elemento wrapper che si può facilmente selezionare? writeCapture.js (full disclosure:L'ho scritto) gestisce tutti questi problemi.Mi raccomando solo l'utilizzo, ma almeno si può guardare il codice per vedere come gestisce il tutto.

EDIT:Qui è un pagina per dimostrare ciò che suona come l'effetto che si desidera.

Altri suggerimenti

Ho creato una semplice pagina di prova che illustra il problema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Document Write Testcase</title>
    </head>
    <body>
        <div id="container">
        </div>
        <div id="container2">
        </div>

        <script>
            // This doesn't work!
            var container = document.getElementById('container');
            container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";

            // This does!
            var container2 = document.getElementById('container2');
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.innerHTML = "alert('bar');document.write('foo');";
            container.appendChild(script);
        </script>
    </body>
</html>

Questa pagina avvisi 'bar' e stampe, 'pippo', mentre mi aspettavo che l'allarme anche "pippo" e di stampa "bar".Ma, purtroppo, dato che la script tag è parte di una grande pagina HTML, non posso singolo che tag e aggiungere come l'esempio di cui sopra.Beh, posso, ma che richiedono la scansione innerHTML contenuti per script tag, e la loro sostituzione nella stringa da segnaposto, e quindi l'inserimento di loro utilizzando il DOM.I suoni non che banale.

Utilizzare document.writeln(content); invece di document.write(content).

Tuttavia, il metodo migliore è usare la concatenazione di innerHTML, come questo:

element.innerHTML += content;

Il element.innerHTML = content; il metodo, che andrà a sostituire il vecchio contenuto con uno nuovo, e sovrascrivere il vostro elemento innerHTML!

Considerando che il += operatore element.innerHTML += content; aggiungere il tuo testo dopo il vecchio contenuto.(come quello che document.write fa.)

document.write è quanto di più obsoleto come vengono.Grazie di tutte le meraviglie di JavaScript, però, è possibile assegnare una funzione propria per l' write metodo di document oggetto che usi innerHTML su un elemento di tua scelta per aggiungere il contenuto fornito.

Posso avere qualche chiarimento prima per assicurarsi che si ottiene il problema?

document.write chiamate per aggiungere contenuti al markup in corrispondenza del punto di markup in cui si verificano.Per esempio, se si include document.write chiama una funzione, ma chiamare la funzione altrove, il document.write l'uscita avverrà presso il punto nel codice della funzione è definito non dove è chiamato.

Quindi per questo lavoro a tutte le Flickr document.write le dichiarazioni dovranno essere parte del content in element.innerHTML = content.È questo sicuramente il caso?

Si potrebbe verificare rapidamente se questo dovrebbe funzionare a tutti con l'aggiunta di un singolo e semplice document.write chiamare il contenuto che è impostato come innerHTML e vedere ciò che questo comporta:

<script>
  var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
  element.innerHTML = content;
</script>

Se funziona, il concetto di document.write di lavoro nel set di contenuti come innerHTML di un elemento che potrebbe funzionare.

La mia sensazione è che non funziona, ma dovrebbe essere abbastanza semplice per testare il concetto.

E così, stai usando un DOM metodo per creare un script elemento e aggiungere che per un elemento esistente, e questo fa sì che poi il contenuto dell'allegato script elemento per eseguire?Che suona bene.

Si dice che il tag script è parte di una grande pagina HTML e quindi non possono essere segnalati.Non ti può dare il tag di script di un ID e di destinazione?Probabilmente sto perdendo qualcosa di ovvio qui.

In teoria, sì, ho single un tag script che modo.Il problema è che, potenzialmente, hanno decine e decine di situazioni in cui questo si verifica, quindi sto cercando di trovare qualche causa o la documentazione di questo comportamento.

Inoltre, l' script tag non sembra essere una parte del DOM di più dopo che viene caricato.Nel nostro ambiente, la mia container div rimane vuoto, e quindi non posso recuperare il script tag.Dovrebbe funzionare, però, perché nel mio esempio di cui sopra, lo script non viene eseguito, ma è ancora parte del DOM.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top