0

Currently I have two HTML files. One named index.html and another called editor.html

Inside index.html I have an iframe of editor.html Above this iframe is also a notification system I made. To run a notification it uses a function I created which can be used like so:

Notification("msg");

This function works great when I call it from inside of the index.html since the function modifies the index.html's html code (via .innerHTML). An issue shows up when I try and call it from the editor.html

Even with the editor.html added into index.html like this at the top of index.html:

<script src="editor.html"></script>

And I wrote this in the editor.html:

<script src="index.html"></script>

When I try and run the Notification function from the editor.html there is an error since the function is inside the index.html and modifies index.html, not editor.html.

Keep in mind that in each of the index.html and editor.html the javascript is in a tag because there is other html within the file. Thanks and please ask questions if you need further confirmation.

Adam Mikacich
  • 137
  • 1
  • 1
  • 13
  • 2
    One page can never run code on another one directly. They can only communicate and transfer data using [`Window.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). From inside the iframe, that would be `window.parent.postMessage()`, and from outside the iframe `document.querySelector('iframe').contentWindow.postMessage()`. You'll also need to attach an event listener for the "message" event on any receiving page. – Siguza Jul 29 '16 at 01:35
  • Can you give an example using seperate index.html and editor.html? A way of passing the function and parameter on? – Adam Mikacich Jul 29 '16 at 02:28

1 Answers1

1

This works fine if the iframe and the container are in the same domain.

You could put the definition of Notification function in a single external file, like main.js:

function Notification( msg )
{
    var div = document.getElementById("notification-div") ;
    div.innerHTML = msg ;
    /* The important thing is make this to be the container window when
     * Notification is called, so document is the desired one.
     */
}

In index.html you should have the iframe and a div to print the notification text:

<div id="notification-div"></div>
<iframe src="editor.html" width=300 height=200></iframe>

Then include main.js in index.html:

<script type="text/javascript" src="main.js"></script>

In index.html you can call it directly, as long as this is window:

Notification( "From index.html" ) ;
/* window will be this in the Notification function, so the call to
 * document.getElementById, will actually be window.document.getElementById
 */

In editor.html you can refer to the container window object as top. So this call will give the desired result:

top.Notification( "From editor.html" ) ;
/* top will be this in the Notification function, so the call to
 * document.getElementById, will actually be top.document.getElementById
 */
  • When I tried this, this error message appeared in the console and running a notification from editor.html didn't work, but from index.html it did. I still **need** it to run from the editor.html. Here is the error: SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. – Adam Mikacich Jul 29 '16 at 03:35
  • @AdamMikacich Are you testing with local files and Chrome? If so, please try the testing with Firefox or Edge. –  Jul 29 '16 at 03:40
  • I am testing with Local files. I'll upload it to my website and see if it works. Btw it is a **must** that this is compatible with Chrome (on the website, it's okay that it wont work locally though). I'll add a comment after the upload is complete and I run my tests. – Adam Mikacich Jul 29 '16 at 03:44
  • @AdamMikacich You can also try the answer to this [question](http://stackoverflow.com/questions/19902538/loading-local-files-with-javascript-without-a-web-server), if you want to continue using Chrome and local files for the testing. –  Jul 29 '16 at 03:46
  • You are awesome! It works great on my website! Thank you so much!!!! :D – Adam Mikacich Jul 29 '16 at 03:49
  • @AdamMikacich Silly me. You don't have to include main.js in editor.html, only in index.html. I updated my answer accordingly. –  Jul 29 '16 at 07:49