Refreshing an iframe after adding a javascript file?

Question

to explain the problem here is a short description of the context:

I am building project micro sites for the programming work that students did in their semester. To showcase the work (it is done in processing p5js) I want to use Iframes where the script will run in.

To do this I did it like described here: https://github.com/processing/p5.js-website/blob/master/js/examples.js#L133

Because the files are coming from an backend I do it like this: I create an iframe and after wards I want to add the script files to it. How ever it does not render anything.

<div class="col-sm-7 middle-col col-sm-offset-3">

    <iframe id="uid" width="100%" height="500" src="assets/p5/p5-iframe-template.html"></iframe>

  <script> 
    var iframe = document.getElementById("uid");

    iframe.onload = function() {
       var userScript = iframe.contentWindow.document.createElement('script');
       userScript.type = 'text/javascript';
       userScript.src = '<?php echo(($content->pfile()->toFile()->url())) ?>';
       userScript.async = false;
       iframe.contentWindow.document.body.appendChild(userScript);
    };
  </script>
</div>

The problem now is that if I get the url of the file and append it, it seems that the iframe does not reload itself and nothing gets displayed (just a blank white canvas).

If I try a different approach and change the script tag's text property like this:

userScript.text = '<?php echo(($content->pfile()->toFile()->content())) ?>';

I will get a Javascript error that looks like the following:

Either way I'm doing it I can not find a solution. I tried refreshing the Iframe by changing it's src attribute but this does not seem to work? Maybe you can help me out.

Related posts I already read and tried: Creating an iframe with given HTML dynamically

Greetings

the first way you shown (injecting script with `.src` set) should work. Maybe problem is with the script you're injecting? — pzmarzly, Jun 09 '16 at 14:01
@eithedog can you further explain whats the problem here and maybe you can give me some insight of how I can work around this. — Andi-lo, Jun 09 '16 at 14:30

eithed · Accepted Answer · 2016-06-09T16:13:19.520

As long as <?php echo(($content->pfile()->toFile()->url())) ?> returns url to your script, your first approach should work if iframe actually finishes loading. It might not run the event at all (I sadly don't know under what cirumstances it happens - it however happens), and it might be why your approach doesn't work.

You can try to manually check if iframe has loaded by accessing readyState property: iframe.contentWindow.document.readyState and checking if it's either interactive or complete and then run adding of the <script> within iframe.

Now, your second approach will fail because you're inserting the source code of target script file into your <script>, which will fail because you're not escaping ' or \n, and that's what the error is telling you (strings can be broken in JS by using \ at the end of line). I'd not try this approach if I were you (but yes, if you escape at least those two characters it would work, I don't know however what other caveats you might encounter).

What you might try is attach the source code in a <script type='template-or-whatever-really-as-long-its-not-text/javascript'><?php echo(($content->pfile()->toFile()->content())) ?></script> and then move script from the one within your document to the one created within the iframe via innerHTML.

Of course, if iframe doesn't trigger the onload event then it amounts to nothing, so I'd look at that first.

Ah, one more thing I've noticed right now - in your first screenshot you're accessing relative path, but in second one the iframe's path is absolute; so it might be that the problem is CORS - in such case while onload event will trigger, you won't be able to add any script to loaded document.

Thank you sir, that helped me out. To that CORS related thing: I was writing relative paths on that template src because the code highlighting of stackoverflow did not display my — Andi-lo, Jun 10 '16 at 22:48
I think you should be able to call the parent window class from within the iframe by doing something like this - `iframe.contentWindow.__p5__ = new p5()` — eithed, Jun 11 '16 at 10:22

Refreshing an iframe after adding a javascript file?

1 Answers1