JavaScript-controlar el punto de inserción para document.write

Question

Me gustaría crear una página que ejecute un script de terceros que incluya document.write después de que el DOM ya se haya cargado por completo.

Mi página no es XHTML. Mi problema es que el document.write está sobrescribiendo mi propia página. (que es lo que hace una vez que el DOM fue cargado).

Intenté anular la función document.write (de manera similar a http://ejohn.org/blog/xhtml-documentwrite-and-adsense/ ) pero eso no cubre los casos en que document.write contiene etiquetas parciales.

Un ejemplo que rompería el código anterior es:

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

¿Hay alguna forma de modificar el punto de inserción document.write a través de JavaScript? ¿Alguien tiene una mejor idea de cómo hacer esto?

Answer 1

Es posible anular el método document.write. Por lo tanto, puede guardar en búfer las cadenas enviadas a document.write y generar el búfer donde desee. Sin embargo, cambiar un script de sincrónico a asíncrono puede causar errores si no se maneja correctamente. Aquí hay un ejemplo:

Reemplazo simplificado de document.write

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

})();

Contenido de 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

He documentado los diferentes problemas que he encontrado al escribir y usar mi reemplazo de document.write: https://github.com/gregersrygg/crapLoader/wiki/What-to-think-about-when-replacing-document.write

Pero el peligro de utilizar un reemplazo document.write son todos los problemas desconocidos que pueden surgir. Algunos ni siquiera son posibles para moverse.

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

Por suerte no he encontrado el problema anterior en la naturaleza, pero eso no garantiza que no suceda;)

¿Todavía quieres probarlo? Pruebe crapLoader (mine) o writeCapture :

También debe revisar iframes amistosos . Básicamente, crea un iframe del mismo dominio y carga todo lo que hay en su documento. Desafortunadamente no he encontrado ninguna buena biblioteca para manejar esto todavía.

Answer 2

Es posible que le interese la biblioteca de Javascript que desarrollé, que permite cargar scripts de terceros utilizando document.write después de window.onload. Internamente, la biblioteca anula document.write, agregando elementos DOM de forma dinámica, ejecutando cualquier script incluido que también pueda usar document.write.

A diferencia de la solución de John Resig (que fue parte de la inspiración para mi propio código), el módulo que desarrollé admite escrituras parciales, como el ejemplo que da con el div:

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

Mi biblioteca esperará el final de la secuencia de comandos antes de analizar y representar el marcado. En el ejemplo anterior, se ejecutaría una vez con la cadena completa "<div>Done here</div>" lugar de 3 veces con un marcado parcial.

He configurado una demostración, en la que cargo 3 Google Ads, un widget de Amazon y Google Analytics dinámicamente .

Answer 3

FWIW, encontré que las opciones de suscripción son la mejor opción que existe en estos días: maneja el envoltorio de un módulo de representación de anuncios molestos como un encanto que permite que nuestra página se cargue sin bloquearse.

Answer 4

Hay mejores maneras de hacer esto. 2 maneras

1) Añadir

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

Answer 5

Para modificar el contenido de la página después de que el DOM haya procesado, debe utilizar una biblioteca javascript para adjuntar HTML o texto en ciertos puntos (jQuery, mootools, prototype, ...) o simplemente utilizar la propiedad innerHTML de cada DOM. Elemento para alterar / añadir texto al mismo. Esto funciona como navegador cruzado y no requiere ninguna biblioteca.

Answer 6

Respuesta original antes de la edición:

Básicamente, el problema de document.write es que no funciona en documentos XHTML . Entonces, la solución más amplia (por más dura que parezca) es no usar XHTML / xml para su página. Debido a IE + XHTML y al problema de mimetype , Google Adsense se está rompiendo (puede ser una buena cosa :), y el cambio general hacia HTML5 No creo que sea tan malo como parece.

Sin embargo, si realmente desea utilizar XHTML para su página, entonces el script de John al que se vinculó es el mejor que tiene en este momento. Sólo huela para IE en el servidor. Si la solicitud es de IE, no haga nada (¡y no sirva la application/xhtml+xml mimetype!). De lo contrario, suéltelo en el <head> de su página y estará listo para las carreras.

Al volver a leer su pregunta, ¿hay algún problema específico que tenga con el guión de John? Se sabe que falla en Safari 2.0 pero eso es todo.

Answer 7

Si está tratando con scripts de terceros, simplemente reemplazar document.write para capturar la salida y pegarla en el lugar correcto no es suficiente, ya que podrían cambiar el script y su sitio se rompería.

writeCapture.js hace lo que necesita (divulgación completa: soy el autor). Básicamente, vuelve a escribir las etiquetas de script para que cada una capture su propia salida document.write y la coloque en el lugar correcto. El uso (usando jQuery) sería algo como:

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

Aquí supongo que desea agregarse al final del cuerpo. Todos los selectores y métodos de manipulación de jQuery funcionarán con el complemento, por lo que puede inyectarlo en cualquier lugar y como desee. También se puede usar sin jQuery, si eso es un problema.