2010-03-02 15 views
23

Belirli bir URL'nin içeriğini alan ve sayfaya yazan basit bir ajax çağrısı oluşturuyorum. JS ben yaşıyorum sorun bu bilgiler buradaJavaScript Document.Write AJAX Kullanırken Tüm Vücut İçeriğini Değiştiriyor

ile tüm vücut içeriğini değiştirir olmasıdır geçerli:

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

ve burada html: incelemek için kundakçı kullanarak

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

, Metni daha önce veya metinden sonra görmüyorum, sadece <div id="mb_ad"> ve test.html sayfasından içerik. Ajax çağrısını kaldırırsam ve daha önce sadece 3 document.writes yazıp metni düzgün gösterecektir. jQuery bir seçenek değil, bunu büyük bir kütüphanenin yardımı olmadan yapmak zorundayım, çünkü boyut ve hız esastır.

+2

, bunu daha muayeneye ihtiyaçlarının tahmin aşağıdaki kodla aynı problem vardı/kırılma noktası. ama "jQuery bir seçenek değil", gerçekten katılıyorum, javascript (google CDN kullanıyorsanız muhtemelen önbelleğe alınır) gerçekten bir web sayfasında bir fark yaratmıyor. Bu güçlü gereksinime sahipseniz bir web sitesinin veya ağ uygulamasının iyi bir fikir olduğundan emin değilim. – Mathieu

+0

ayrıca DOMAssistant veya benzeri gibi hafif kütüphaneler kullanabilirsiniz. – dusoft

+0

, bu betiğin diğer web sitelerine yerleştirileceği gerçeği ile ilgilidir, bu yüzden muhtemelen başka kütüphaneleri kullanan bir siteye jQuery gibi bir kitaplık eklemek veya belki de jQuery'nin kendisi sadece sorunlara neden olacaktır. –

cevap

41

Belgenin yüklenmesi tamamlandığında document.write kullanamazsınız. Eğer yaparsanız, tarayıcı akımı değiştiren yeni bir belge açacaktır.

Bir elemanın içine HTML kodu koymak için innerHTML özelliğini kullanın: Eğer geri çağırma işlevi çağrıldığında var olduğundan emin olacak şekilde

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

, komut önce elemanı koyun:

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

Komut dosyasını nereye yerleştirdiğinizden pek bir şey yoktur, çünkü belgenin bulunduğu yere hiçbir şey yazılmaz.

+0

ayrı bir "div" olmadan ne denediğimi gerçekleştirmek mümkün mü? Bunun bir müşteri sitesine gömülü bir şey olması gerekiyordu ve bunu tek bir komut dosyası çağrısı ile yapmam istendi. –

+0

Evet, AJAX çağrısını yapmadan önce div'i sayfaya yazmak için document.write'i kullanabilirsiniz. – Guffa

+0

bu harika çalışıyor, teşekkürler! –

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

Şimdi, bu düğümü olmasını istediğiniz yere ekleyebilirsiniz.

13

durumda bu kadar gibi bir şey yazmak mümkün olabilir uzaktan komut kontrol edemiyorum, <script>document.body.innerHTML+="//Your HTML Code Here";</script>

0

kullanabilirsiniz ...

<script> 
var tmp = document.write; 

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

Eh bu kötü bir hack ama iş gibi görünüyor:

0

aynı Leon Fedotov cevap ama daha 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

ben

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

Aşağıdaki kod document.write verimli yerine geçer:: Ben senin koduyla yanlış olabilir şeyi bulamıyorum

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