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

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

javascript html css

Javascript-将内容写入另一个html文档中的框架,javascript,html,css,frame,frameset,Javascript,Html,Css,Frame,Frameset,如果这是一个简单的问题，请原谅，但目前我有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").valu

如果这是一个简单的问题，请原谅，但目前我有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,*";
}

函数sendCode（）{
var previewFrame=parent.frames[3]；
var htmlCode=parent.frames[1]。document.getElementById（“inputtml”）.value；
var cssCode=parent.frames[2].document.getElementById（“inputcss”）.value；
previewFrame.document.write（“”）；
previewFrame.document.write（“+cssCode+”）；
previewFrame.document.write（“+htmlCode+”）；
previewFrame.document.close（）；
}
函数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>

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


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>


演示页面的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>


网页设计演示控件按钮
创建网页

出于某种原因，它可以在InternetExplorer11和MicrosoftEdge中工作，但不能在GoogleChrome中工作。代码似乎是正确的，但这可能是什么原因造成的？也许我需要以不同的方式引用它？

试试这个： 然后要在iframe中编辑代码，您可以放置：

<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>

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

iframedoc.body.innerHTML+=“Hellow World”；

或

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

iframedoc.head.innerHTML+=“警报（'Hello World'）”；

iframedoc

只是一个

document

对象，因此可以像这样使用它：

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