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?

score 14 · Accepted Answer · edited May 23 '17 at 12:17

14

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

edited May 23 '17 at 12:17

Community

1
1

answered Feb 26 '13 at 04:37

Matt Ball

354,903
100
647
710

nextSibling is only supported since IE9 https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.nextSibling – Bogdan Gusiev Dec 20 '13 at 09:36
3

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](http://blog.jquery.com/2013/04/18/jquery-2-0-released/) and does not support IE <9. It's time to move on. – Matt Ball Dec 20 '13 at 17:11
1

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. – Michael Nov 17 '16 at 18:29
Nowadays you can use `document.currentScript` to the exact script tag which loaded the script you're in. Supported on everything except IE -> https://caniuse.com/document-currentscript – hiddentao Nov 17 '19 at 20:46

score 1 · Answer 2 · answered Feb 26 '13 at 04:42

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);

Insert iframe at current script tag location?

2 Answers2

Linked

Related