How to inject <script> tag into empty iframe without document.write?

Question

I want to load an iframe that does nothing else than load a JavaScript file from a given URL. While this would be easy by loading a simple HTML page into the iframe that only contains the <script> tag to load the JavaScript file, but that would require two requests to the server.

So my idea is to write the code to load the JS file from the calling method in the parent window into the empty iframe.

Something like this works on all browsers:

function createScriptFrame(container, url) {
    const frame = document.createElement('iframe');
    container.appendChild(frame);
    const doc = frame.contentDocument;
    doc.open();
    doc.write('<html><body><script src="' + url + '"></script></body></html>');
    doc.close();
}

But using document.write is a really nasty way of doing it. Chrome even complains with a warning in the console: [Violation] Avoid using document.write().

I've come up with a few alternative approaches, for example:

// same as above until doc.open()
const s = doc.createElement('script');
s.src = url;
doc.head.appendChild(s);

or

const s = doc.createElement('script');
s.appendChild(doc.createTextNode('(function() { const s = 
document.createElement("script"); s.src = "' + url + '"; 
document.body.appendChild(s); })()'));
doc.head.appendChild(s);

These work nicely in Chrome and Safari but not in Firefox.

I've compiled a test with several methods to load the script: https://embed.plnkr.co/l8DwUBQs7cQsi938eTOn/

Any ideas how to make this work?

Endless · Accepted Answer · 2017-07-06 07:14:35Z

2

You can create a blob and open it

var url = 'foo'
var blob = new Blob([
  '<html><body><script src="' + url + '"></script></body></html>'
], {type: 'text/html'})
var iframeUrl = URL.createObjectURL(blob)
console.log(iframeUrl)

...Or if you like a base64 url

You can also use the srcdoc but it isn't supported by IE/Edge

edited Jul 6, 2017 at 7:14

answered Jul 5, 2017 at 11:33

Endless

38.8k14 gold badges118 silver badges138 bronze badges

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

6 Comments

Philipp Jardas Over a year ago

Nice idea, I've added both blob and data URL to the Plunk, but neither works in any browser. The frame content is properly created but the frame.js is never loaded. Could be a security constraint.

Endless Over a year ago

you must add the base tag or use absolute path to your javascript file

Endless Over a year ago

there is one different between blob and dataURI in that blobs will inherit the Origin property which can be important for accessing the same local storage, cookies, indexeddb, cors-request etc

Philipp Jardas Over a year ago

Using the absolute URL worked for both data URL and blob. Thanks! Still need to find out about browser support...

Endless Over a year ago

caniuse.com/#feat=bloburls with android you might have to use webkit prefix

|

Fasani · Accepted Answer · 2021-08-11 15:09:37Z

0

Instead of document.write() you could now use a new attribute on iframe which is srcDoc.

https://caniuse.com/iframe-srcdoc

answered Aug 11, 2021 at 15:09

Fasani

5,7691 gold badge25 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to inject <script> tag into empty iframe without document.write?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related