Problems with IFrame response

Hey folks,

I got lots of troubles with a feature I need to implement on a site.

We got a project site where the best students get featured with their semester work in their different courses. In one of those courses they do Processing JS (p5.js). To show the programming work I want to include an IFrame into our projects page where the script files of the students will be placed in.

My approach was the following (sadly it does not work):

<div class="col-sm-7 middle-col col-sm-offset-3">
      <!--  Get the standard iframe template from the assets folder I want to use as basis -->
      <iframe width="100%" height="500" src="<?php echo url('assets/p5/p5-iframe-template.html'); ?>">
      <!-- Inject via javascript a Javascript-Tag of the students processing files into the iframe -->
        var iframe = $(someUniqueID)[0];
        var userScript = iframe.contentWindow.document.createElement('script');
        userScript.type = 'text/javascript';
        userScript.async = false;

        // get the script content into the iframe
        userScript.text = "new p5();" + '<?php echo(file_get_contents($content->pfile()->toFile()->url())) ?>';

<div class="col-sm-2 caption">
  <p><?php echo $content->caption()->kirbytextRaw() ?></p>

The problem is, that after the IFrame html tag nothing seems to get executed. If I just do this:

      <iframe width="100%" height="500" src="<?php echo url('assets/p5/p5-iframe-template.html'); ?>">

      <?php echo ("Hello"); ?>

the “Hello” will never appear in the browser. I don’t get any errors or crashes which prevents the code from executing either. The Iframe will get injected into my browser but the caption, the script tag and everything else is missing.
Thats how it looks in the dev tool:

Any idea what I can do to solve this?

Help is greatly appreciated,


Anything you put in between the opening and closing iframe tags is only shown if iframe is not supported. It does not take any other content then the page you want to load via the iframe.

you could sole it using params in your template/controller and response.

same idea as returning json. which you can find good tutorials in this forum.

something like this untested pseudocode

if ($filename = param('skriptid')) { // assuming id is filename from iframe src... note: problems with extension might arise
  $jsskriptcontent = file_get_contents($content->file(filename)->url());
  $tmpl = $roots->assets() . DS . 'p5' . DS . 'p5-iframe-template.html';
  $jsskriptcontent = str::template($tmpl, ['INJECT']=> $jsskriptcontent); // template needs {INJECT} somewhere
} // continue as ususal

and update the iframe to load this

<iframe width="100%" height="500" src="<?php echo $content->url().DS.'skriptid:'.$content->pfile()->filename() ?>">

Thank you for trying to help me out.

The problem was javascript related and I posted a thread on stackoverflow.