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

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

24 голосов
/ 02 марта 2010

Я создаю простой вызов 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 не вариант, я должен сделать это без помощи большой библиотеки, так как размер и скорость важны.

Ответы [ 6 ]

42 голосов
/ 02 марта 2010

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

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

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

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

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

Не имеет большого значения, где вы разместите скрипт, так как ничего не будет записано в документе, где он находится.

13 голосов
/ 23 марта 2011

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

<script>
var tmp = document.write;

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

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

2 голосов
/ 02 марта 2010 
var div = document.createElement('div');
div.id = 'mb_ad';
div.innerHTML = ad_content;

Теперь вы можете добавить этот узел в любом месте.

0 голосов
/ 31 января 2017

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

$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>';
0 голосов
/ 19 июня 2015

Тот же Леон Федотов ответ, но больше 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;
}
0 голосов
/ 20 мая 2013

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...