Question

请原谅我这是一个简单的问题，但目前我有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。代码似乎是正确的，但是可能导致这种情况的原因是什么？也许我需要以不同的方式引用它？

Answer 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

等

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

1 个答案:

试试这个：