2010-03-02 46 views
23

Tôi đang tạo một cuộc gọi ajax đơn giản truy xuất nội dung của một url được chỉ định và ghi nó vào trang. Vấn đề tôi đang gặp là nó thay thế toàn bộ nội dung cơ thể với thông tin nàyTài liệu JavaScript.Write thay thế tất cả nội dung nội dung Khi sử dụng AJAX

đây là 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", ""); 
})(); 

và đây là 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> 

sử dụng firebug để kiểm tra, tôi không thấy văn bản trước hoặc sau văn bản, chỉ cần <div id="mb_ad"> và nội dung từ trang test.html. Nếu tôi xóa cuộc gọi ajax và chỉ cần thực hiện 3 document.writes văn bản trước và văn bản sau sẽ hiển thị chính xác. jQuery không phải là một lựa chọn, tôi phải làm điều này mà không cần sự trợ giúp của một thư viện lớn vì kích thước và tốc độ là bản chất.

+2

tôi không thể tìm thấy những gì có thể là sai với mã của bạn, tôi đoán nó cần kiểm tra nhiều hơn/điểm ngắt. nhưng đối với "jQuery không phải là một lựa chọn", tôi thực sự không đồng ý, 24ko javascript (có thể được lưu trữ nếu sử dụng google CDN) thực sự không tạo sự khác biệt trên trang web. Nếu bạn có yêu cầu mạnh mẽ tôi không chắc chắn một trang web hoặc thậm chí một ứng dụng mạng là một ý tưởng tốt. – Mathieu

+0

hơn nữa, bạn có thể sử dụng thư viện nhẹ như DOMAssistant hoặc tương tự. – dusoft

+0

nó phải làm với thực tế là kịch bản này sẽ được chèn vào các trang web khác, do đó, để thêm một thư viện như jquery vào một trang web có thể sử dụng các thư viện khác, hoặc thậm chí jquery chính nó, sẽ chỉ gây ra vấn đề. –

Trả lời

41

Bạn không thể sử dụng document.write khi tài liệu đã hoàn tất tải. Nếu bạn làm như vậy, trình duyệt sẽ mở một tài liệu mới thay thế cho tài liệu hiện tại.

Sử dụng innerHTML tài sản để đưa HTML code bên trong một phần tử:

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

Đặt yếu tố trước khi kịch bản, do đó bạn chắc chắn rằng nó tồn tại khi hàm callback được gọi là:

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

Không quan trọng bạn đặt kịch bản ở đâu, vì không có gì được ghi vào tài liệu ở đâu.

+0

là nó có thể hoàn thành những gì tôi đang cố gắng mà không có một 'div' riêng biệt? Điều này được cho là một cái gì đó được nhúng vào một trang web của khách hàng, và tôi đã được yêu cầu làm điều đó với một cuộc gọi script duy nhất. –

+0

Có, bạn có thể sử dụng document.write để viết div vào trang trước khi thực hiện cuộc gọi AJAX. – Guffa

+0

hoạt động tốt, cảm ơn! –

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

Bây giờ, bạn có thể nối thêm nút này bất cứ nơi nào bạn muốn.

13

trong trường hợp bạn không thể kiểm soát kịch bản từ xa bạn có thể viết một cái gì đó giống như vậy:

<script> 
var tmp = document.write; 

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

Vâng đó là một hack khó chịu nhưng có vẻ như để làm việc ...

0

bạn có thể sử dụng <script>document.body.innerHTML+="//Your HTML Code Here";</script>

0

Cùng Leon Fedotov câu trả lời nhưng nhiều 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

tôi có cùng một vấn đề với đoạn mã sau:

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

Các mã sau thay thế document.write hiệu quả:

$html = '<div id="dialogHolder"></div> 
     <script> 
       if($("#mf_dialogs").length == 0) { 
        document.getElementById("dialogHolder").innerHTML="<div id=\"mf_dialogs\"></div>"; 
       } 
     </script>'; 
Các vấn đề liên quan