Javascript documentElement.innerHTML不显示iframe主体_Javascript_Html_Iframe

Javascript documentElement.innerHTML不显示iframe主体

javascript html iframe

Javascript documentElement.innerHTML不显示iframe主体,javascript,html,iframe,Javascript,Html,Iframe,我有一个页面，其中有一个iframe。我通过javascript制作iframe。稍后，我需要保存该页面并用确切的内容重新打开它。例如，如果用户在iframe主体中编写sumthing并保存它，然后重新打开页面，那么iframe应该具有相同的内容。要保存页面，我的逻辑是获取文档的innerHTML，创建一个新的html文件并将内容写入其中。现在的prblm是，当我执行document.documentElement.innerHTML时，iframe部分确实会出现在其中，但是主体部分和html部

我有一个页面，其中有一个iframe。我通过javascript制作iframe。稍后，我需要保存该页面并用确切的内容重新打开它。例如，如果用户在iframe主体中编写sumthing并保存它，然后重新打开页面，那么iframe应该具有相同的内容。要保存页面，我的逻辑是获取文档的innerHTML，创建一个新的html文件并将内容写入其中。现在的prblm是，当我执行document.documentElement.innerHTML时，iframe部分确实会出现在其中，但是主体部分和html部分会丢失。唯一出现的是

。如何获得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>


iframe测试
函数showStr（）{
var customArea=document.getElementById（'custom-area'）；
var newdiv=document.createElement（'div'）；
setAttribute（'id'，“myDiv”）；
customArea.appendChild（newdiv）；
var htcontents=“”；
newdiv.innerHTML=htcontents；
document.getElementById（“myIframe”）.contentDocument.designMode=“on”；
}
函数showIF（）
{
log（document.documentElement.innerHTML）；
}

我用这个在铬。。。谢谢

基于此，这里有一个解决方案：

更新

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版）配合使用。

基于以下解决方案：

更新

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版）配合使用。

你真的是指iframe的主体吗？在我看来，iframe的主体是空的。是的，当页面加载时它是空的……但是iframe处于可编辑模式，这意味着你可以在其中写入文本。即使我在iframe中写入sumthing，并执行inspect元素，我也可以看到我刚刚在iframes标记中写入的文本。但是即使我得到了父文档体的innerHtml…iframe体也不见了！！你真的是指iframe的主体吗？在我看来，iframe的主体是空的。是的，当页面加载时它是空的……但是iframe处于可编辑模式，这意味着你可以在其中写入文本。即使我在iframe中写入sumthing，并执行inspect元素，我也可以看到我刚刚在iframes标记中写入的文本。但是即使我得到了父文档体的innerHtml…iframe体也不见了！！非常感谢…我以前确实看过这篇文章！但令人费解的是，在这种情况下，我如何才能得到一个包含父html和iframe html作为一个对象的html，这样我就可以将其写入新的html文件？非常感谢…我以前看过这篇文章！但令人费解的是，在这种情况下，我如何获得一个包含父html和iframe html作为一个对象的html，以便我可以将其写入新的html文件？