有没有办法写入通过Iframe显示的外部HTML文件？

Question

Overall, I just want to write to a external file. So, I have two HTML files and currently one JS file. Suppose the html pages are called main.html and inframe.html. Currently, my JavaScript file, is empty, function I am trying to write a function so that if I type something to an input on main.html, click a button, it can be written to inframe.html.

At the moment, I have the iframe:

<iframe src="inframe.html" style="background: #FFFFFF;"width="350px" height="100%">
        <p>Your browser does not support iframes.</p>
</iframe>

And just a button in main.html:

<button style="width:100%; onclick="doStuff()"> &lt;h4&gt; </button>

The function doStuff() is supposed to simply write "Hello World!" to inframe.html which in tern should display in the iframe.

How exactly can I do such a task? It seems simple, but I can't figure it out.

Answer 1

One way of doing this is to use the iframe element's contentWindow property, but first give the iframe an id to access it with.

HTML

<iframe id="myFrame" height="100" width="300" src="about:blank"></iframe>
<button onclick="doStuff()" type="button">doStuff</button>

JavaScript

function doStuff() {
   var frame = document.getElementById("myFrame");
   var win = frame.contentWindow;

   win.document.write("hello folks")
}

Of course document.write is mostly used these days while learning JavaScipt and HTML, and does not see much use elsewhere.

You can research things like this by searching for "MDN IFRAME element" to start with.