headerImage2

Dynamic Load <script> and <iframe> via PHP and JavaScript

There are many ways to load JavaScript, here are a few:

I am sure there are many more ways. I will discuss using PHP and a 'data-uri' and using JavaScript a 'blob' and URL.createObjectURL(...). One possible advantage to this approch is that the JavaScript is pretty obfuscated as it appears as a base64 string not easily readable code.

Using PHP

First with PHP. There are a lot of ways to do it with PHP but I am going to show you how to create a script tag via a base64 'data-uri'.

<?php
// This uses jQuery but could all be done with straight JavaScript.
// Put some JavaScript code into the $thescript variable.
// The JavaScript will catch a click
// on the element with id 'clickme' and fire an alert box.
$thescript =<<<EOF
// by using 'on' this will work even though the paragraph is not yet appended.
$(document).on('click', '#clickme', function() {
  alert('click');
});
­EOF;

Turn the script we created above into base64

$thescript = base64_encode($thescript);

Here is the magic that makes a data url script.
We create this JavaScript and place it in the $script variable.

$script = <<<EOF
<script id="plugger">
(function(){
    var plug=document.createElement('script');
    plug.setAttribute("src", "data:application/x-javascript;base64,$thescript");
    plug.setAttribute("name", "dynamic script");
    document.getElementsByTagName("head")[0].appendChild(plug);
})();

$('#plugger').remove(); // Remove this script tag to keep it clean as everything has been done.
</script>
EOF;

Now $script has an anonymous JavaScript function. When we output the page we just need to include this variable like so:

echo <<<EOF
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- dynamic script -->
$script
</head>
<body>
<p id='clickme' style='color: red'>ClickMe</p>
<!-- More stuff goes here -->
­EOF;

Now if you click the red 'ClickMe' paragraph the alert fires.

ClickMe

You can look at the code using Firebug or Chrome tools (and I am sure there is some way to look at the code in IE -- maybe). You can also look at the code by typing CTRL-u on most browsers. Note that the actual page code is a bit more complex than what I have shown above.

Using JavaScript (No PHP needed)

By using blobs and data-uri's you can create a dynamic script in JavaScript alone.

Again I am using jQuery. First we create a blob. You should check somehow to see if blobs and data-uri's are supported in the browser as some OLD (read that Internet Explorer) versions of browsers don't support much HTML5 or for that matter much of anything.

The blob has pretty much the same code as used in the PHP example except we are using another paragraph element with an id of 'clickme2'.

We then create a script element. We turn the blob into a data-uri and assign the uri to the 'src' attribute of the script. We set the name attribute so it is easier to find the script in the code if you look with the debugger. Then the script is appended to the 'head' section.

Below is the green 'ClickMe2' paragraph:

ClickMe2

What Else?

iframes have always been a pain. Having to load the iframe from a site rather than being able to dynamically create them was always a drawback.

If your browser supports srcdoc, you can create an ifrom like this:

<iframe srcdoc='<h1>This way uses srcdoc></h1><p>Cool do you not think.</p>'</iframe>
And Here it is. Very simple if your browser supports srcdoc:

Otherwise you can use the PHP or JavaScript approach.

Using PHP

Now with data uri's you can dynamically create the source for the iframe either with PHP on the server or via JavaScript on the client.

With PHP on the server all you have to do is convert the HTML you want to have in the iframe to base64 and then add 'data:application/x-javascript;base64,' to the start.

// Create the text
$data =<<<EOF
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'/>
</head>
<body>
<h1>I am an IFRAME</h1>
<p>Dynamically created iframe using PHP.</p>
</body>
</html>
­EOF;
// Turn it into a data uri
$data = "data:text/html;base64," . base64_encode($data);

Then in your HTML source just add the iframe as usual with the 'src' tag.

<script type="syntaxhighlighter" class="brush: xml"><![CDATA[ <iframe id="frame" style="width: 50%;" src="$data"≷≷/iframe> ]]></script>

That is all there is to it.

Using JavaScript

Blobs and data-uri's are great fun. Another use for these is dynamically creating <iframe> tags. It is nice to be able to dynamically create an iframe rather than having to load it from a file somewhere. For a long time this was just not possible or very very hard to achieve. In the past I have resorted to temporary files or trickie 'eval' code. This blob-data-uri way is much nicer I think.