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 -->
<script>
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())) ?>';
iframe.contentWindow.document.body.appendChild(userScript);
</script>
</div>
<div class="col-sm-2 caption">
<p><?php echo $content->caption()->kirbytextRaw() ?></p>
</div>
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,
Cheers