Javascript - 将内容写入另一个 html 文档中的框架答案

【问题标题】：Javascript - Write content to frame in another html documentJavascript - 将内容写入另一个 html 文档中的框架
【发布时间】：2017-04-14 19:18:56
【问题描述】：

如果这是一个简单的问题，请原谅我，但目前我有 Javascript 代码：

function sendCode() {
   var previewFrame = parent.frames[3];
   var htmlCode = parent.frames[1].document.getElementById("inputhtml").value;
   var cssCode = parent.frames[2].document.getElementById("inputcss").value;

   previewFrame.document.write("<html><head><title></title>");
   previewFrame.document.write("<style type='text/css'>" + cssCode + "</style>");
   previewFrame.document.write("</head><body>" + htmlCode + "</body></html>");
   previewFrame.document.close();
}

function showPreview() {
   parent.document.getElementById("demo").rows="100,1,*";
}

但是，当我将 html 或 css 添加到页面上的输入标记并提交时，没有任何反应。我是否正确引用了这个？这是有问题的html文档。谢谢！

demo.htm：

<html>
<head>
   <title>HTML Demo</title>
   <link href="code.css" rel="stylesheet" type="text/css" />
</head>
<frameset rows="100,210,*" id="demo" name="demo"> 
   <frame name="title" id="title" src="title.htm" scrolling="no" />
   <frameset cols="*,*">
      <frame name="htmlcode" id="htmlcode" src="html.htm" />
      <frame name="csscode" id="csscode" src="css.htm" />
   </frameset>
   <frame name="preview" id="output" />
</frameset>
</html>

html.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>HTML Code for the Demo Page</title>
   <link href="code.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <form name="code" id="code" action="">
   <p>
      &lt;body&gt;
      <textarea id="inputhtml" name="inputhtml"></textarea>
      &lt;/body&gt;
   </p>
   </form>
</body>
</html>

title.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Design Demo Control Buttons</title>
    <link href="title.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <form name="control" id="control" action="">
        <h2 id="demotitle">Creating Web Pages </h2>
        <p>
            <input type="button" value="Submit Code" id="submitCode" />
            <input type="button" value="Show Only Code" id="showCode" />
            <input type="button" value="Show Only Preview" id="showPreview" />
            <input type="button" value="Show Code and Preview" id="showBoth" />
        </p>
    </form>
</body>
</html>

由于某种原因，它可以在 Internet Explorer 11 和 Microsoft Edge 中运行，但不能在 Google Chrome 中运行。代码似乎是正确的，但可能是什么原因造成的？也许我需要以不同的方式引用它？

【问题讨论】：

标签： javascript html css frame frameset

【解决方案1】：

试试这个：

var iframedoc = document.getElementById('iframeElementId').contentDocument || document.getElementById('iframeElementId').contentWindow.document;

然后编辑 iframe 中的代码：

iframedoc.body.innerHTML += "<p>Hellow World</p>";

或者

iframedoc.head.innerHTML += "<script>alert('Hello World')</script>";

iframedoc 只是一个document 对象，因此可以这样使用：

iframedoc.addEventListener（如 document.addEventListener）
document.body 和 document.head
等

【讨论】：