2010-03-02 2 views
23

나는 지정된 URL의 내용을 검색하고 페이지에 기록하는 간단한 ajax 호출을 작성합니다. JS 나는 데 문제는이 정보의 여기JavaScript Document.Write는 AJAX를 사용할 때 모든 본문 내용을 바꿉니다.

와 몸 전체 내용을 대체하는이다 :

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

, 앞이나 뒤의 텍스트는 단지 <div id="mb_ad">이고 test.html 페이지의 내용은 표시되지 않습니다. 만약 내가 아약스 전화를 제거하고 단지 3 document.writes 텍스트를하면 텍스트가 제대로 표시됩니다. jQuery는 옵션이 아닙니다. 크기와 속도가 본질적이기 때문에 큰 라이브러리의 도움없이이 작업을 수행해야합니다.

+2

, 나는 더 검사를 필요로 추측 다음 코드로 같은 문제가 없었다/중단 점. 하지만 "jQuery는 옵션이 아닙니다."에 대해서는 정말로 동의하지 않습니다. 24ko의 자바 스크립트 (Google CDN을 사용하는 경우 캐시 된 것임)는 실제로 웹 페이지에서 차이를 내지 않습니다. 당신은 강한 요구 사항이 있다면 나는 웹 사이트 또는 심지어 네트워크 응용 프로그램이 좋은 생각인지 모르겠다. 또한 – Mathieu

+0

DOMAssistant 또는 유사와 같은 경량 라이브러리를 사용할 수 있습니다. – dusoft

+0

그것은이 스크립트가 다른 웹 사이트에 삽입된다는 사실과 관련이 있습니다. 따라서 jquery와 같은 라이브러리를 다른 라이브러리를 사용하고 있거나 심지어 jquery 자체를 사용하는 웹 사이트에 추가하면 문제가 발생할 수 있습니다. –

답변

41

문서로드가 완료되면 document.write을 사용할 수 없습니다. 그렇게하면 브라우저가 현재를 대체하는 새 문서를 엽니 다.

요소 내부에 HTML 코드를 넣어 innerHTML 속성을 사용 : 당신이 콜백 함수가 호출 될 때 존재하는지 확인되도록

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> 

스크립트가있는 위치는 문서에 아무 것도 쓰지 않으므로 스크립트의 위치는 중요하지 않습니다.

+0

별도의 'div'없이 시도하고있는 것을 성취하는 것이 가능한가? 이것은 클라이언트 사이트에 내장 된 것으로 생각되며, 단일 스크립트 호출로이 작업을 수행하도록 요청 받았습니다. –

+0

예, document.write를 사용하여 AJAX 호출을하기 전에 div를 페이지에 쓸 수 있습니다. – Guffa

+0

훌륭한 작품입니다. 감사합니다! –

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

이제이 노드를 원하는 곳에 추가 할 수 있습니다.

13

경우에 당신은 당신과 같이 뭔가를 쓸 수있을 원격 스크립트를 제어하지 못할 <script>document.body.innerHTML+="//Your HTML Code Here";</script>

0

사용할 수있는 ...

<script> 
var tmp = document.write; 

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

음이 더러운 해킹이지만 작동하는 것 같다 :

0

같은 레온 페도 토프 대답하지만, 더 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

I

$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>'; 
관련 문제