Question

我有这个方法，除了在Firefox中工作正常：

function write(template) {
    document.open("text/html", "replace");
    document.write(template);
    document.close();
}

write("<!DOCTYPE html><head><title>MyPage</title></head><body>111</body><html>");

在firefox中，整个页面无法再刷新，当您更新地址字段中的哈希时，它会强制刷新页面。

在chrome中不会发生这种情况。

有没有不同的方法来更新整个文档，让Firefox一起玩？

谢谢！

----------- ---------- EDIT

我注意到有一个 document.childNodes [0] .remove（）方法来调用它将删除旧文档，但我无法将新文档节点添加到该数组。

var node = document.createElement("html");
node.innerHTML = "<body>1111</body>";
document.childNodes[0].remove();
document.childNodes[0] = node;

似乎没有用。任何提示？

-----------编辑2 ----------

function write(template) {
    var node = document.createElement("html");
    node.innerHTML = template;

    var head = node.getElementsByTagName("head")[0];
    var body = node.getElementsByTagName("body")[0];

    if ( head ) {
        document.documentElement.replaceChild(
            head,
            document.documentElement.getElementsByTagName("head")[0]
        );
    }

    if ( body ) {
        document.documentElement.replaceChild(
            body,
            document.documentElement.getElementsByTagName("body")[0]
        );
    }

}

这很成功地取代了dom，不幸的是，不像写它没有重新评估样式或脚本标签，使它无用:(

-------编辑3 -------

产生与EDIT 2相同的效果，使其也无用：

function write(template) {
    var node = document.createElement("html");
    node.innerHTML = template;

    document.replaceChild(node, document.childNodes[0]);

}

-----编辑4 -----

请参阅下面的答案

Answer 1

我建议你使用jQuery的.html()函数。（或innerHTML如果您更喜欢使用纯Javascript）

如果已加载文档DOM，则不应使用document.write。

Answer 2

显然，当正确使用html（）时，jQuery能够重新评估脚本，这里是write方法：

function write(template) {
    var node       = document.createElement("html");
    node.innerHTML = template;

    var head = node.getElementsByTagName("head")[0];
    var body  = node.getElementsByTagName("body")[0];

    if ( head ) {
        jQuery("head").html(head.innerHTML);
    }

    if ( body ) {
        jQuery("body").html(body.innerHTML);
    }

}

write("<!DOCTYPE html><head><title>MyPage</title></head><body>111</body><html>");

：d

Answer 3

更换DOM后，您可以通过创建新元素来手动重新评估script和style：

function write(template) {
  var node = document.createElement("html");
  node.innerHTML = template;

  var head = node.getElementsByTagName("head")[0];
  var body = node.getElementsByTagName("body")[0];

  if ( head ) {
      document.documentElement.replaceChild(
        head,
          document.documentElement.getElementsByTagName("head")[0]
      );
  }

  if ( body ) {
      document.documentElement.replaceChild(
        body,
         document.documentElement.getElementsByTagName("body")[0]
    );
  }


var scripts = document.getElementsByTagName("script"),
styles = document.getElementsByTagName("style");

var or_scripts_length = scripts.length,
or_styles_length = styles.length;

//reproduce scripts
for(var i=0; i<or_scripts_length; i++){
   new_script = document.createElement("script");
   new_script.setAttribute("src", scripts[i].src);
   document.head.appendChild(new_script);
  if(i == or_scripts_length)
     break; //in order to avoid revaluating new created scripts which results to an infinite loop
 }

 //do the same for styles
}

Javascript，Firefox替换整个文档而没有document.write

3 个答案: