Question

我有一个页面中有一个iframe。我正在通过javascript制作iframe。稍后我需要保存该页面并使用确切的内容重新打开它。例如，如果用户在iframe主体中编写了一些东西并保存了它然后重新打开了页面，则iframe shud具有相同的内容。保存页面我的逻辑是获取文档的innerHTML，创建一个新的html文件并将内容写入其中。现在prblm是当我执行document.documentElement.innerHTML时，iframe部分确实出现在其中，但缺少body部分和html部分。唯一出现的是<iframe></iframe>。如何获取iframe的HTML以及父页面的HTML？下面是让你看到document.documentElement.innerHTML在控制台上打印的代码

的代码

<html>
<head>
   <title>iframe test</title>
<script type="text/javaScript">
function showStr(){

        var customArea = document.getElementById('custom-area');
        var newdiv = document.createElement('div'); 
        newdiv.setAttribute('id',"myDiv");
        customArea.appendChild(newdiv);
        var htcontents = "<iframe id='myIframe' frameborder='1'></iframe>";
        newdiv.innerHTML = htcontents; 
        document.getElementById("myIframe").contentDocument.designMode="on";
}

function showIF()
{
    console.log(document.documentElement.innerHTML);
}
</script>
</head>
<body onLoad="showStr()">
<button id="myButton" onClick="showIF()"></button>
<div id="custom-area"></div>
</body>
</html>

我在chrome中使用它... 谢谢！

Answer 1

基于this post，这是一个解决方案：

<强>更新

function showIF()
{
  var f= document.getElementById('myIframe');
  var d= f.contentDocument? f.contentDocument : f.contentWindow.document;
  var customArea = document.getElementById('custom-area');
  //read the content of iframe
  var iframeContent = d.body.innerHTML;
  //delete the iframe himself
  f.parentNode.removeChild(f);
  //Append the html to parent div
  customArea.innerHTML += iframeContent;
  //console.log(d.body.innerHTML);
}

至少它适用于我的Chrome浏览器（版本11.0.696.60）

documentElement.innerHTML未显示iframe正文

1 个答案: