JavaScript Document.Write reemplaza todo el contenido del cuerpo al utilizar AJAX

Estoy creando una llamada ajax simple que recupera el contenido de una URL específica y la escribe en la página. El problema que estoy teniendo es que se sustituye el contenido de todo el cuerpo con esta informaciónJavaScript Document.Write reemplaza todo el contenido del cuerpo al utilizar AJAX

aquí es la JS:

(function(){ 
    var mb = window.mb = {}; 

    function get_ad(url, parameters){ 
     var result = ""; 
     var http_request = false; 

     if (window.XMLHttpRequest) { // Mozilla, Safari,... 
      http_request = new XMLHttpRequest(); 
      if (http_request.overrideMimeType) { 
       http_request.overrideMimeType('text/html'); 
      } 
     } else if (window.ActiveXObject) { // IE 
      var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; 
      for (var i = avers.length -1; i >= 0; i--) { 
       try { 
        http_request = new ActiveXObject(avers[i]); 
        if (http_request){ 
         break; 
        } 
       } catch(e) {} 
      } 
     } 
     if (!http_request) { 
      alert('Cannot create XMLHTTP instance'); 
      return false; 
     } 

     http_request.onreadystatechange = function(){ 
               if (http_request.readyState == 4) { 
               if (http_request.status == 200) { 
                gen_output(http_request.responseText); 
               } else { 
                alert('Error'); 
               } 
               } 
              } 

     http_request.open('GET', url + parameters, true); 
     http_request.send(null); 
    } 

    function gen_output(ad_content){ 
     document.write("<div id=\"mb_ad\">"); 
     document.write(ad_content); 
     document.write("</div>"); 
    } 

    get_ad("http://localhost/test/test.html", ""); 
})();

y aquí está el html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
    i am text before <br/> 
    <script type="text/javascript" src="mb.js"></script> 
    <br /> 
    i am text after 
</body> 
</html>

usando Firebug para inspeccionar, No veo el texto antes o el texto después, solo el <div id="mb_ad"> y el contenido de la página test.html. Si elimino la llamada ajax y solo hago 3 document.writes el texto anterior y el texto después se mostrará correctamente. jQuery no es una opción, tengo que hacer esto sin la ayuda de una gran biblioteca ya que el tamaño y la velocidad son esenciales.

Fuente

2010-03-02 Russ Bradberry

no puedo encontrar lo que podría estar mal con su código, supongo que necesitan más inspecciones/punto de quiebre pero para "jQuery no es una opción", realmente no estoy de acuerdo, 24ko de javascript (que probablemente está almacenado en caché si usa google CDN) realmente no está haciendo una diferencia en una página web. Si tiene un requisito tan fuerte, no estoy seguro de que un sitio web o incluso una aplicación de red sea una buena idea. – Mathieu

además, podría usar una biblioteca liviana como DOMAssistant o similar. – dusoft

tiene que ver con el hecho de que esta secuencia de comandos se insertará en otros sitios web, por lo que agregar una biblioteca como jquery a un sitio web que probablemente esté utilizando otras bibliotecas, o incluso jquery en sí mismo, solo causará problemas. –

No puede usar document.write una vez que el documento ha terminado de cargarse. Si lo hace, el navegador abrirá un nuevo documento que reemplaza el actual.

Utilice la propiedad innerHTML poner código HTML dentro de un elemento:

function gen_output(ad_content){ 
    document.getElementById('mb_ad').innerHTML = ad_content; 
}

Ponga el elemento antes de la secuencia de comandos, por lo que está seguro de que existe cuando la función de devolución de llamada se llama:

i am text before 
<div id="mb_ad"></div> 
i am text after 
<script type="text/javascript" src="mb.js"></script>

No importa mucho dónde coloque el script, ya que nada se escribirá en el documento donde se encuentra.

Fuente

2010-03-02 00:16:09 Guffa

¿es posible lograr lo que estoy intentando sin un 'div' separado? Se supone que esto es algo que está incrustado en el sitio de un cliente, y se me pidió que lo hiciera con una sola llamada de script. –

Sí, podría usar document.write para escribir el div en la página antes de realizar la llamada AJAX. – Guffa

esto funciona genial, gracias! –

var div = document.createElement('div'); 
div.id = 'mb_ad'; 
div.innerHTML = ad_content;

Ahora puede agregar este nodo donde quiera que esté.

Fuente

2010-03-02 00:17:02

en caso de que usted no puede controlar a distancia el guión que podría ser capaz de escribir algo así:

<script> 
var tmp = document.write; 

document.write = function() { 
    document.getElementById('someId').innerHTML = [].concat.apply([], arguments).join(''); 
}; 
</script> 
<script .....> 
document.write = tmp;

Bueno, es un truco desagradable, pero parece que funciona ...

Fuente

2011-03-23 18:02:05

puede utilizar <script>document.body.innerHTML+="//Your HTML Code Here";</script>

Fuente

2013-05-19 21:07:56

La misma respuesta Leon Fedotov pero más jQuery

{ 
    var old_write = document.write; 

    var $zone = $('.zone.zone_' + name); 
    // redefine document.write in this closure 
    document.write = function() { 
    $zone.append([].concat.apply([], arguments).join('')); 
    }; 
    // OA_output[name] contains dangerous document.write 
    $zone.html(OA_output[name]); 

    document.write = old_write; 
}

Fuente

2015-06-19 07:12:37

I tenido el mismo problema con el siguiente código:

$html[] = '<script> 
      if($("#mf_dialogs").length == 0) { 
       document.write("<div id=\"mf_dialogs\"></div>"); 
      } 
      </script>';

El código siguiente sustituye document.write eficiente:

$html = '<div id="dialogHolder"></div> 
     <script> 
       if($("#mf_dialogs").length == 0) { 
        document.getElementById("dialogHolder").innerHTML="<div id=\"mf_dialogs\"></div>"; 
       } 
     </script>';

Fuente

2017-01-31 10:46:43 kundun

JavaScript Document.Write reemplaza todo el contenido del cuerpo al utilizar AJAX

Respuesta

Cuestiones relacionadas