Question

按下按钮后，我将整个HTML内容从网页（<html>标签内的部分）发送到CGI脚本，该脚本操纵内容并将其发回。

现在我正在尝试用新的内容替换现有内容。不幸的是，在分配后，每个<head>或<body>标记（以及结束标记）都将被杀死。

通过使用一些警报，我查看了返回值以及原始HTML内容。两者都绝对符合预期。

但在任务完成后，还有一些魔力在继续。请帮我弄清楚发生了什么。

以下是我使用的JavaScript代码：

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;
}

Answer 1

这是一个对我有用的简单解决方案。仅作为参考。

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

其中newHtml是新网页的完整html。

Answer 2

好吧，有了这个

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

你正在替换html中的所有内容，“杀死”身体，头部和一切...... 也许你想要

document.body.innerHTML = http_request.responseText

另外，我会使用jquery，这会让你的生活变得更轻松

Answer 3

你做不到。无法替换整个html标记的内容。您只需更换body标签的内容即可。 head元素有点神奇，浏览器通常不支持替换它。

如果要更改整个文档，请重定向到该文档。

如果您只想更改部分头部，请尝试以不同的形式（如JSON）发送它们，并使用javascript API进行适当的更改。

Answer 4

感谢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);

但是，Firefox的行为非常奇怪，而不是弹出一些错误......

在HTTP请求之后替换整个HTML内容会杀死HEAD和BODY标记！

4 个答案: