Adding JS to an empty iframe

Question

I'm trying to add a JavaScript file to the header of an iframe so that upon loading, the iframe can before a "background task" for me. Currently the iframe is empty, because there is no source I want it to display. Namely, all the iframe will do is perform the script I wish to supply to it.

I have tried suggestions from here:

Yet I cannot get a simple "write" to the iframe to work. Here's the code I am working with:

demo.html

<html>
<head>
<script src="demo.js"></script>  

<script>  
addScript('demo.js');  

function addScript(src){
// Find the iFrame
var iframe = document.getElementById('test');
var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';

var headID = iframe.getElementsByTagName("head")[0];         

var newScript = iframe.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'demo.js';
headID.appendChild(newScript);

</script>  
</head>
<body>
    <div class="output">  
        <iframe id="test"></iframe>  
    </div>
</body>
</html>

demo.js

document.write("Hello, I'm a Demo.");

You've to call addScript after the iframe has been parsed. — Teemu
– Teemu, Commented Jun 15, 2015 at 17:24
The element must exist before you can get a reference to it with getElementById. — Teemu
– Teemu, Commented Jun 15, 2015 at 18:00

Raúl Martín · Accepted Answer · 2015-06-15 17:53:36Z

1

You can add directly the content string

http://jsfiddle.net/0m5axpxx/

var iframe = document.createElement('iframe');
var html = '<body><scr'+ 'ipt>alert(1)</s' + 'cript>Content</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);

answered Jun 15, 2015 at 17:53

Raúl Martín

4,7293 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mpallansch · Accepted Answer · 2015-06-15 17:50:37Z

0

You should use iframe.contentWindow.document instead of just iframe for some of your calls. Also, demo.js is in the outside page, not inside the iframe, so you either need to give an absolute path (i.e. http://www.example.com/demo.js) or you need to set the contents of the script. This worked for me:

var iframe = document.getElementById('test');
var headID = iframe.contentWindow.document.getElementsByTagName("head")[0];         

var newScript = iframe.contentWindow.document.createElement('script');
newScript.innerHTML = 'document.write("Hello, I\'m a Demo")';
newScript.type = 'text/javascript';
headID.appendChild(newScript);

edited Jun 15, 2015 at 17:50

answered Jun 15, 2015 at 17:44

mpallansch

1,1946 silver badges16 bronze badges

2 Comments

user2958542 Over a year ago

"Uncaught TypeError: Cannot read property 'contentWindow' of null"

mpallansch Over a year ago

Sorry, I only changed the part below so I didn't think to include the declaration of iframe above it. I updated the answer

Collectives™ on Stack Overflow

Adding JS to an empty iframe

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related