2009-10-08 10 views
17

Chciałbym utworzyć stronę, która uruchamia skrypt innej firmy, który zawiera document.write po pełnym załadowaniu DOM.JavaScript - kontrolowanie punktu wstawienia dla document.write

Moja strona nie jest XHTML. Mój problem polega na tym, że document.write nadpisuje moją własną stronę. (co dzieje się po załadowaniu DOM).

Próbowałem przesłonić funkcję document.write (w sposób podobny do http://ejohn.org/blog/xhtml-documentwrite-and-adsense/), ale nie obejmuje to przypadków, w których plik document.write zawiera znaczniki częściowe.

Przykładem, który złamie powyższy kod jest:

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

Czy istnieje jakiś sposób, aby zmodyfikować punkt wstawiania document.write poprzez JavaScript? Czy ktoś ma lepszy pomysł, jak to zrobić?

+0

to pobrany skrypt innej firmy, aby można go było edytować?Myślę, że to może być lepsze rozwiązanie niż hackowanie 'document.write()' – peirix

+0

Mój przykład minął. Miałem na myśli: document.write ('<' + 'div'); document.write ('>' + 'Treść tekstowa' + '<'); document.write ('\ div>') –

+0

Mogę go edytować, ale oprócz pełnego parsowania JS, czy istnieje sposób na zagwarantowanie poprawnego działania edytowanego kodu? –

Odpowiedz

3

Original Answer przed EDIT:


Zasadniczo problem document.write jest to, że does not work in XHTML documents. Najpopularniejszym rozwiązaniem (jakkolwiek może się to wydawać nieprzyjemne) jest nie używać XHTML/xml dla twojej strony. Z powodu IE + XHTML i mimetype problem, łamanie Google Adsense (może być dobre :) i ogólne przejście w stronę HTML5 nie wydaje mi się tak złe, jak się wydaje.

Jeśli jednak chcesz naprawdę lubisz używać XHTML dla swojej strony, to skrypt Johna, z którym się łączysz, jest najlepszy w tym momencie. Po prostu powąchaj IE na serwerze. Jeśli żądanie pochodzi z IE, nie rób nic (i , nie podawaj typu mimetowego application/xhtml+xml!). W przeciwnym razie upuść go na stronę <head> i ruszaj do wyścigów.

Ponownie czytając swoje pytanie, czy masz jakiś szczególny problem ze scenariuszem Johna? W Safari 2.0 nie działa, ale to już wszystko.

+0

Moja strona nie używa XHTML, ale ładuję skrypty stron trzecich po wczytaniu DOM i zastępują one moją stronę. Mój problem polega na tym, że poniższy kod nie powiedzie się: document.write ('<' + 'div');
document.write ('>' + 'Treść tekstowa' + '<');
document.write (' \ div> '); –

+0

@yeeeev: wow, więc to nie ma nic wspólnego z XHTML? Powinieneś naprawdę umieścić ten kod w swoim pytanie jako fragment kodu, abyśmy mogli ci pomóc lepiej.Brak pojawia się niepoprawnie jako komentarz –

+0

@yeeev: Widzę, że próbowałeś już to wstawić Pozwól mi edytować Twoje pytanie ... –

0

Aby zmienić zawartość strony po renderowaniu DOM, musisz użyć biblioteki javascript do dołączenia HTML lub tekstu w określonych punktach (jQuery, mootools, prototype, ...) lub po prostu użyć innerHTML właściwość każdego elementu DOM do zmiany/dołączenia do niej tekstu. To działa crossbrowser i nie wymaga żadnych bibliotek.

-2

Istnieją lepsze sposoby na zrobienie tego. 2 sposoby

1) Dołącz

<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

Nie kochasz poprawnej odpowiedzi? –

+2

To rozwiązanie jest bezużyteczne, jeśli nie można zmienić skryptu strony trzeciej, a rozwiązanie nr 2 zastąpiłoby całe ciało "cześć świat" .Typowe? – gregers

+0

@gregers.To tylko przykład tej techniki.Narzędzie –

3

Możesz być zainteresowany the Javascript library I developed który pozwala na załadowanie skryptów 3rd stron za pomocą document.write po window.onload . Wewnętrznie biblioteka zastępuje document.write, dynamicznie dołączając elementy DOM, uruchamiając wszelkie dołączone skrypty, które mogą również używać document.write.

przeciwieństwie rozwiązanie Johna Resig (która była częścią inspiracji dla własnego kodu), moduł opracowałem obsługuje częściowe zapisy, takie jak np dajesz z Gr:

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

Moja biblioteka będzie czekać na koniec skryptu przed analizą i renderowaniem znaczników. W powyższym przykładzie byłby uruchamiany raz z pełnym ciągiem "<div>Done here</div>" zamiast 3 razy z częściowym znacznikiem.

Ustawiłem a demo, in which I load 3 Google Ads, an Amazon widget as well as Google Analytics dynamically.

11

Jeśli masz do czynienia ze skryptami innych firm, po prostu zastąpienie pliku document.write, aby przechwycić dane wyjściowe i umieścić je w odpowiednim miejscu, nie jest wystarczająco dobre, ponieważ mogą one zmienić skrypt, a następnie Twoja witryna zostanie zerwana.

writeCapture.js robi to, czego potrzebujesz (pełne ujawnienie: jestem autorem). Zasadniczo przepisuje on znaczniki skryptów, tak aby każdy przechwytywał własne dane wyjściowe i umieszczał je we właściwym miejscu. Wykorzystanie (jQuery) byłoby coś jak:

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

Tutaj jestem przy założeniu, że chcesz dołączyć do końca ciała. Wszystkie selektory i metody manipulacji jQuery będą działały z wtyczką, więc możesz ją wstrzyknąć w dowolne miejsce i jakkolwiek chcesz. Można go również używać bez jQuery, jeśli jest to problem.

+0

Kiedy używam tego kod, Chrome szczeka na mnie i zgłasza błąd: "Uncaught SyntaxError: nieoczekiwany token ILLEGAL" –

4

Możliwe jest zastąpienie metody document.write. Możesz więc buforować ciągi wysyłane do document.write i wyprowadzać bufor tam, gdzie chcesz. Jednak zmiana skryptu z synchronicznego na asynchroniczny może powodować błędy, jeśli nie jest obsługiwana poprawnie. Oto przykład:

wymiana document.write Zmniejsz

(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"; 

})(); 

Zawartość 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 

mam udokumentowane różne problemy, z jaką się spotkałem podczas pisania i za pomocą mojego Zastąpienie dokumentu: https://github.com/gregersrygg/crapLoader/wiki/What-to-think-about-when-replacing-document.write

Ale niebezpieczeństwo związane z użyciem zamiennika document.write to wszystkie nieznane problemy, które mogą się pojawić. Niektórych nie da się obejść.

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

Na szczęście ja nie natknąć powyższego problemu w środowisku naturalnym, ale to nie gwarantuje, że nie będzie się działo;)

Nadal chcesz go wypróbować? Wypróbuj crapLoader (moja) lub writeCapture:

Powinieneś również sprawdzić friendly iframes. Zasadniczo tworzy on element iframe tej samej domeny i ładuje wszystko tam, zamiast w dokumencie. Niestety nie znalazłem żadnych dobrych bibliotek do obsługi tego jeszcze.

1

FWIW, znalazłem postscribe, aby być najlepszą opcją w dzisiejszych czasach - zajmuje się zawijaniem brzydkiego modułu renderowania reklam, takiego jak urok pozwalający na załadowanie naszej strony bez blokowania.

Powiązane problemy