2009-10-08 11 views
17

Vorrei creare una pagina che esegua uno script di terze parti che includa document.write dopo che il DOM era già stato caricato completamente.JavaScript: controllo del punto di inserimento per document.write

La mia pagina non è XHTML. Il mio problema è che document.write sta sovrascrivendo la mia pagina. (che è quello che fa una volta che il DOM è stato caricato).

Ho provato a sovrascrivere la funzione document.write (in un modo simile a http://ejohn.org/blog/xhtml-documentwrite-and-adsense/) ma ciò non copre i casi in cui document.write contiene tag parziali.

Un esempio che potrebbe rompere il codice di cui sopra è:

document.write("<"+"div"); 
document.write(">"+"Done here<"+"/"); 
document.write("div>"); 

C'è qualche modo per modificare il punto di inserimento document.write tramite JavaScript? Qualcuno ha un'idea migliore di come farlo?

+0

è lo script di terze parti scaricato, quindi è possibile modificarlo?Penso che potrebbe essere una soluzione migliore di hacking 'document.write()' – peirix

+0

Il mio esempio ha superato. Quello che volevo dire era: document.write ('<' + 'div'); document.write ('>' + 'Contenuto testo' + '<'); document.write ('\ div>') –

+0

Posso modificarlo, ma oltre all'analisi completa di JS, esiste un modo per garantire che il codice modificato funzioni correttamente? –

risposta

3

risposta originale prima della modifica:


In sostanza il problema di document.write è che does not work in XHTML documents. La soluzione più ampia quindi (per quanto possa sembrare difficile) è quella di non utilizzare XHTML/xml per la tua pagina in . Grazie a IE + XHTML e allo mimetype problem, l'interruzione di Google Adsense (potrebbe essere una buona cosa :), e lo spostamento generale verso HTML5 non penso che sia così brutto come sembra.

Tuttavia se si desidera che lo sia veramente come utilizzare XHTML per la propria pagina, lo script di John a cui si è collegati è il migliore che si abbia a questo punto. Basta annusare per IE sul server. Se la richiesta proviene da IE, non fare nulla (e non utilizzare per il mimootipo application/xhtml+xml!). Altrimenti lasciala nella <head> della tua pagina e sei fuori per le gare.

Rileggendo la tua domanda, c'è un problema specifico che hai con la sceneggiatura di John? È risaputo che non funziona con Safari 2.0, ma questo è tutto.

+0

La mia pagina non utilizza XHTML, ma carico gli script di terze parti dopo che il DOM è stato caricato e sostituiscono la mia pagina. Il mio problema è che il seguente codice non funzionerà: document.write ('<' + 'div');
document.write ('>' + 'Contenuto testo' + '<');
document.write (' \ div> '); –

+0

@yeeeev: wow, quindi questo non ha nulla a che fare con XHTML? domanda come un frammento di codice in modo da poterti aiutare meglio Sembra in modo errato come commento –

+0

@yeeev: Vedo che hai già provato a inserirla. Fammi modificare la tua domanda .... –

0

Per modificare il contenuto della pagina dopo il rendering del DOM, è necessario utilizzare una libreria javascript per aggiungere HTML o testo in determinati punti (jQuery, mootools, prototype, ...) o semplicemente utilizzare innerHTML proprietà di ciascun elemento DOM per alterare/aggiungere testo ad esso. Questo funziona crossbrowser e non richiede alcuna libreria.

-2

Ci sono modi migliori per farlo. 2 modi

1) Aggiunge

<html><head> 
<script> 
    window.onload = function() { 
    var el = document.createTextNode('hello world'); 
    document.body.appendChild(el); 
    } 
</script></head><body></body></html> 

2) InnerHtml

<html><head><script> 
    window.onload = function() { 
    document.body.innerHTML = 'hello world'; 
    } 
</script></head><body></body></html> 
+0

Nessun amore per la risposta corretta? –

+2

Questa soluzione è inutile se non è possibile modificare lo script di terze parti.La soluzione n.2 sostituirà l'intero corpo con 'hello world'. Typo? – gregers

+0

@gregers.E 'solo un esempio della tecnica –

3

Potreste essere interessati a the Javascript library I developed che permette di caricare gli script 3rd party che utilizzano document.write dopo window.onload . Internamente, la libreria sovrascrive document.write, aggiungendo dinamicamente gli elementi DOM, eseguendo qualsiasi script incluso che possa utilizzare anche document.write.

differenza soluzione di John Resig (che faceva parte l'ispirazione per il mio codice), il modulo ho sviluppato supporta le scritture parziali come l'esempio si dà con il div:

document.write("<"+"div"); 
document.write(">"+"Done here<"+"/"); 
document.write("div>"); 

Biblioteca sarà attendere la fine dello script prima di analizzare e rendere il markup. Nell'esempio sopra, verrebbe eseguito una volta con la stringa intera "<div>Done here</div>" anziché 3 volte con marcatura parziale.

Ho impostato a demo, in which I load 3 Google Ads, an Amazon widget as well as Google Analytics dynamically.

11

Se hai a che fare con script di terze parti, la semplice sostituzione di document.write per acquisire l'output e incollarlo nel posto giusto non è sufficiente, poiché potrebbero cambiare lo script e quindi il tuo sito si romperebbe.

writeCapture.js fa quello che ti serve (completa divulgazione: io sono l'autore). Fondamentalmente riscrive i tag di script in modo che ognuno acquisisca il proprio output document.write e lo collochi nella posizione corretta. L'uso (usando jQuery) sarebbe qualcosa di simile:

$(document.body).writeCapture().append('<script type="text/javascript" src="http://3rdparty.com/foo.js"></script>'); 

Qui sto supponendo che si desidera aggiungere alla fine del corpo. Tutti i selettori jQuery e i metodi di manipolazione funzioneranno con il plug-in, quindi è possibile iniettarlo ovunque e in qualsiasi modo. Può anche essere usato senza jQuery, se questo è un problema.

+0

Quando uso questo codice, Chrome abbaia e genera un errore: 'Uncaught SyntaxError: Unexpected token ILLEGAL' –

4

È possibile sovrascrivere il metodo document.write. Quindi puoi bufferizzare le stringhe inviate a document.write ed emettere il buffer dove preferisci. Tuttavia, la modifica di uno script da sincrono a asincrono può causare errori se non gestita correttamente. Ecco un esempio:

sostituzione document.write semplificato

(function() { 
    // WARNING: This is just a simplified example 
    // to illustrate a problem. 
    // Do NOT use this code! 

    var buffer = []; 
    document.write = function(str) { 
     // Every time document.write is called push 
     // the data into buffer. document.write can 
     // be called from anywhere, so we also need 
     // a mechanism for multiple positions if 
     // that's needed. 
     buffer.push(str); 
    }; 

    function flushBuffer() { 
     // Join everything in the buffer to one string and put 
     // inside the element we want the output. 
     var output = buffer.join(''); 
     document.getElementById("ad-position-1").innerHTML = output; 
    } 

    // Inject the thid-party script dynamically and 
    // call flushBuffer when the script is loaded 
    // (and executed). 
    var script = document.createElement("script"); 
    script.onload = flushBuffer; 
    script.src = "http://someadserver.com/example.js"; 

})(); 

Contenuto http://someadserver.com/example.js

var flashAdObject = "<object>...</object>"; 
document.write("<div id='example'></div>"); 

// Since we buffer the data the getElementById will fail 
var example = document.getElementById("example"); 
example.innerHTML = flashAdObject; // ReferenceError: example is not defined 

ho documentato i diversi problemi che ho incontrato durante la scrittura e usando il mio sostituzione document.write: https://github.com/gregersrygg/crapLoader/wiki/What-to-think-about-when-replacing-document.write

Ma il pericolo di utilizzare una sostituzione document.write sono tutti i problemi sconosciuti che possono sorgere. Alcuni non sono nemmeno in grado di andare in giro.

document.write("<scr"+"ipt src='http://someadserver.com/adLib.js'></scr"+"ipt>"); 
adLib.doSomething(); // ReferenceError: adLib is not defined 

Per fortuna non ho incontrato il problema di cui sopra in natura, ma che non garantisce che non accadrà;)

Ancora voglia di provarlo? Prova crapLoader (mio) o writeCapture:

Dovresti anche dare un'occhiata allo friendly iframes. Fondamentalmente crea un iframe dello stesso dominio e carica tutto lì invece che nel tuo documento. Sfortunatamente non ho trovato alcuna buona libreria per gestire questo ancora.

1

FWIW, ho trovato postscribe come l'opzione migliore in questi giorni: gestisce l'involucro di un fastidioso modulo di rendering degli annunci come un incantesimo che consente il caricamento della pagina senza essere bloccati.

Problemi correlati