JavaScript Document.Write заменяет все содержимое тела при использовании AJAX

Я создаю простой вызов ajax, который извлекает содержимое указанного URL и записывает его на страницу. Проблема, с которой я сталкиваюсь, заключается в том, что она заменяет все содержимое тела этой информацией

вот 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", "");
})();

и вот 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>

используя firebug для проверки, я не вижу текст раньше или текст после, просто <div id="mb_ad"> и содержимое страницы test.html. Если я удалю вызов ajax и просто сделаю 3 document.writes текст до и текст после будет отображаться правильно. jQuery - это не вариант, я должен сделать это без помощи большой библиотеки, поскольку размер и скорость суть.

Ответы

Ответ 1

Вы не можете использовать document.write после завершения загрузки документа. Если вы это сделаете, браузер откроет новый документ, который заменит текущий.

Используйте свойство innerHTML для размещения HTML-кода внутри элемента:

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

Поместите элемент перед script, чтобы вы были уверены, что он существует, когда вызывается функция обратного вызова:

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

Не важно, где вы поместите script, так как ничего не будет записано в документе, где он находится.

Ответ 2

если вы не можете управлять удаленным script, вы можете написать что-то вроде этого:

<script>
var tmp = document.write;

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

Ну, это неприятный хак, но он, похоже, работает...

Ответ 3

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

Теперь вы можете добавить этот node, где бы вы этого ни хотели.

Ответ 4

вы можете использовать <script>document.body.innerHTML+="//Your HTML Code Here";</script>

Ответ 5

Тот же Леон Федотов отвечает, но больше 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;
}

Ответ 6

У меня была такая же проблема со следующим кодом:

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

Следующий код эффективно заменяет document.write:

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