전체 HTML 콘텐츠를 대체하면 HTTP 요청 후 HEAD 및 BODY 태그가 삭제됩니다!

버튼을 누르면 웹 페이지 (<html> 태그 내의 부분)에서 전체 HTML 콘텐츠를 콘텐츠를 조작하고 다시 전송하는 CGI 스크립트로 보냅니다.전체 HTML 콘텐츠를 대체하면 HTTP 요청 후 HEAD 및 BODY 태그가 삭제됩니다!

이제 기존 콘텐츠를 새로운 콘텐츠로 대체하려고합니다. 불행히도 할당 후, 모든 단일 <head> 또는 <body> 태그 (뿐만 아니라 닫는 것들)가 사망합니다.

일부 경고를 사용하여 원본 HTML뿐만 아니라 반환 값을 살펴 보았습니다. 둘 다 절대적으로 예상대로입니다.

하지만 과제가 끝나면 어떤 마법이 계속됩니다. 무슨 일이 일어나는지 알아 내도록 도와주세요. 몸, 머리와 모두를 "죽이는"당신은 HTML insidee 모두를 교체하는이

document.getElementsByTagName('html')[0].innerHTML = http_request.responseText

로,

var originalBodyInnerHTML = document.body.innerHTML; 
var htmlNode = document.getElementsByTagName('html')[0]; 
var post_parameters = encodeURIComponent(htmlNode.innerHTML); 

makePOSTRequest("POST", "http://whatever.com/cgi-bin/doit.cgi", post_parameters, htmlNode); 

function makePOSTRequest(method, url, parameters, htmlNode) { 
    var http_request = getRequestObj(); 

    if (!http_request) { 
    alert('Cannot create XMLHTTP instance'); 
    return false; 
    } 

    http_request.onreadystatechange = function() 
    { 
    if (http_request.readyState < 4) 
    { 
     var waitingPageBody = '< img src="/img/ajaxloader.gif" alt="in progress..."/>'; 
     document.body.innerHTML = waitingPageBody; 
    } 
    else //if (http_request.readyState == 4) 
    { 
     if (http_request.status == 200) 
     { 
      alert('1response: ' + http_request.responseText); 
      alert('2innerhtml: ' + document.getElementsByTagName('html')[0].innerHTML); 
      document.getElementsByTagName('html')[0].innerHTML = http_request.responseText; 
     }//end of if (http_request.status == 200) 
     else 
     {//other http statuses 
      alert("There was a problem (" + http_request.statusText + ", " + http_request.status + ' error)'); 
      bodyNode.innerHTML = originalBodyInnerHTML; 
     } 
    }//end of else if http_request.readyState == 4 
    } 

    http_request.open(method, url, true); //async 
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    http_request.setRequestHeader("Accept", "application/atom+xml,application/xml,text/xml"); 
    http_request.setRequestHeader("Connection", "close"); 
    http_request.send(parameters); 
} 

function getRequestObj() { 
    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 
    try { 
     http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) 
    { 
     try { 
      http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch (e) {} 
    } 
    } 

    return http_request; 
}

출처

2009-10-23 dforce

음 ... 다음은

내가 사용하는 사용하는 자바 스크립트 코드 은 어쩌면 당신은 내가를 사용하는 것,

document.body.innerHTML = http_request.responseText

또한

를 원했다 0, 그것은 당신의 인생을 훨씬 쉬워지게합니다.

출처

2009-10-23 10:29:50 Victor

+1 jquery advice에 대해 – nexneo

예 im를 모두 바꾸십시오. 그러나 서버의 응답에는 이미 이러한 태그가 포함되어 있습니다. 그래서 대체해야 정확히 내가 무엇을 필요합니다. unfortunatelly이 asignment 내 몸과 머리 태그를 죽일; (. 물론 나는 또한 jquery 또는 프로토 타입을 좋아하지만 내 특별한 맥락에서 그것을 사용할 수 없습니다 ... – dforce

당신은 그렇게 할 수 없습니다. 전체 HTML 태그의 내용을 바꿀 수는 없습니다. body 태그의 내용 만 바꾸면됩니다. head 요소는 일종의 마법이며 브라우저는 일반적으로 그것을 대체하지 않습니다.

전체 문서를 변경하려면 해당 문서로 리디렉션하십시오.

머리 부분 만 변경하려면 다른 양식 (예 : JSON)으로 보내고 자바 스크립트 API를 사용하여 적절하게 변경하십시오.

출처

2009-10-23 19:12:38 qbeuek

답변 해 주셔서 감사합니다.

헤더 만 변경하려면 Firefox는 실제로 다음과 같이 허용합니다.

document.getElementsByTagName('head')[0] += "e.g. some scripts"

그러나 Internet Explorer의 경우 DOM 트리에 개별적으로 각 요소를 추가해야합니다.

 
var script = document.createElement("script"); 
script.setAttribute('type','text/javascript'); 
objHead.appendChild(script);

그러나 이것은 나를 위해 일한 간단한 솔루션입니다 ...

출처

2009-10-25 14:15:00 dforce

파이어 폭스는 다음과 같이 동작하며 일부 오류 팝업하지 않는 것이 정말 이상한 것입니다. 그냥 참고로.

document.clear(); 
document.write(newHtml);

여기에서 newHtml은 새 웹 페이지의 전체 HTML입니다.

출처

2012-10-04 22:12:27 gazda

전체 HTML 콘텐츠를 대체하면 HTTP 요청 후 HEAD 및 BODY 태그가 삭제됩니다!

답변

관련 문제