Javascript-Write content to frame in another html document

Question

Javascript-Write content to frame in another html document

Perdoe-me se esta é uma pergunta simples, mas actualmente tenho o código 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,*";
}

No entanto, quando adiciono html ou css à etiqueta de entrada na página e submeto, nada acontece. Estou a referir-me a isto correctamente? Aqui estão os documentos html em questão. Obrigada!

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>

título.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>

Por alguma razão, funciona no internet explorer 11 e no Microsoft Edge, mas não no Google Chrome. O código parece estar correcto, mas o que pode estar a causar isto? Talvez precise de o referir de forma diferente?

0

html css javascript frameset frame

Author: Roko C. Buljan, 2017-04-14

Source

1 answers

score 0 · Answer 1

Tenta isto:

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

Então para editar o código no iframe você colocaria:

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

Ou

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

iframedoc é apenas um objeto document para que possa ser usado assim:

iframedoc.addEventListener (como o documento.addEventListener)
document.body e document.head
Etc.