CODEWITHSUNDEEP
javascriptjqueryhtmliframeonload
John Cipponeri
John Cipponeri

Reputation: 892

How can I execute code in an iFrame's onload event?

I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of

Code in Editor

<script type="text/javascript">
    window.onload = function() {
        alert("hello");
    }
</script>

to the head or body of the iFrame, the code is never executed. This is my current code:

Injecting Code into iFrame

$("#btnRun").click(function(event) {  
    event.preventDefault();

    // iFrame with id="preview"
    var preview = $("#preview").contents();

    // Get code from editor and wrap in <script> tags
    var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue()  + "</script>";

    // Append code to head or body, in this case head
    preview.find("head").append(script);
});

The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.

I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.

This is the iFrame in my index.html document.

iFrame in index.html

<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
    #document
    <!-- Editor content goes here -->
</iframe>

After the code is injected the iFrame looks like this

iFrame with Injected Code

<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
    #document
    <html>
      <head>
        <script type="text/javascript">
          window.onload = function() {
            alert("hello");
          }
        </script>
      </head>
    <body>
    </body>
  </html>
</iframe>

Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.

Thank you.

Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.

Upvotes: 0

Views: 6635

Answers (3)

Adrian Oprea
Adrian Oprea

Reputation: 2950

I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.

I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.

https://github.com/opreaadrian/iframe-injected-scripts

Cheers,
Adrian.

Upvotes: 1

John Cipponeri
John Cipponeri

Reputation: 892

I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.

$("#btnRun").click(function(event) {  
    event.preventDefault();

    var previewDoc = window.frames[0].document;

    var css    = ace.edit("css-editor").getSession().getValue();
    var script = ace.edit("js-editor").getSession().getValue();
    var html   = ace.edit("html-editor").getSession().getValue();

    previewDoc.write("<!DOCTYPE html>");
    previewDoc.write("<html>");
    previewDoc.write("<head>");
    previewDoc.write("<style type='text/css'>" + css + "</style>");
    previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
    previewDoc.write("</head>");
    previewDoc.write("<body>");
    previewDoc.write(html);
    previewDoc.write("</body>");
    previewDoc.write("</html>");
    previewDoc.close();
});

Upvotes: 1

Stuart Miller
Stuart Miller

Reputation: 657

I would think that you are adding the JS to the iframe after the onload event has already fired.

Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?

Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent

Upvotes: 2

Related Questions