Insert iframe at current script tag location?

Question

I've got what we'll just call a "widget"...and I want to insert that widget (ultimately just an iframe) at the current location of the script tag.

So you might have:

<p>Some example text</p>
<script src="http://example.com/widget.js" class="widget" async></script>
<p>More text</p>

In that widget.js file, there is this:

var createIframe = function() {
 var parent = document.getElementsByClassName('widget');
 var iframe = document.createElement('iframe');
 iframe.src = '//example.com'
 // Works, but just inserts it at the end
 document.body.appendChild(iframe);
 // Does not work...just doesn't seem to do anything
 document.createElement("div").appendChild(iframe);
}
window.onload = function() {
 createIframe();
}

And as noted in the code comment, doing document.body.appendChild(iframe) works fine, but just inserts the iframe at the very end of the document.

But what I really want to do is just insert the iframe right where the script tag is. That document.body.appendChild(iframe) is my attempt at it, but it literally just doesn't seem to do anything (no iframe and no errors).

So, how can I insert the iframe in the same spot as the script tag?

Answer 1

You need to get the current <script> tag, which in this case is the last one:

var thisScript = document.scripts[document.scripts.length - 1];

and insert the <iframe> after it:

var parent = thisScript.parentElement;
parent.insertBefore(iframe, thisScript.nextSibling);

http://jsfiddle.net/mattball/Tz75x/

Or simply replace the current script with the <iframe>:

var parent = thisScript.parentElement;
parent.replaceChild(iframe, thisScript);

http://jsfiddle.net/mattball/a23XE/

---

Alternately – if you can believe it – document.write() is actually a suitable solution here, so long as you do it while the document is loading and not in a window.onload callback:

function createIframe() {
 document.write('<iframe src="//example.com"></iframe>');
}
createIframe();

http://jsfiddle.net/mattball/2YCcP

• Bogdan Gusiev: nextSibling is only supported since IE9 developer.mozilla.org/en-US/docs/Web/API/TreeWalker.nextSibling
• Matt Ball: Thanks for the heads-up, but I'm entirely disinterested in supporting legacy IE in pretty much any of the code that I write. jQuery 2 was released in April 2013 and does not support IE <9. It's time to move on.
• Michael: var thisScript = document.scripts[document.scripts.length - 1]; will only give you the current script if it is not embedded using async or defer attributes and not inserted by an async write.
• hiddentao: Nowadays you can use document.currentScript to the exact script tag which loaded the script you're in. Supported on everything except IE -> caniuse.com/document-currentscript

Answer 2

Add an ID to your <script> element and query this element from the DOM, e.g. <script id="myscript" src="http://example.com/widget.js" class="widget" async></script>.

In widget.js:

var scriptElement = document.getElementById("myscript");
var parentElement = scriptElement.parentElement;
parentElement.replaceChild(iframe, scriptElement);