在当前的脚本标签位置插入 iframe？

Question

我可以为您提供帮助，以下是我翻译的结果：

我有一个我们称之为“小部件”的东西...... 我想在脚本标记的当前位置插入该小部件（最终只是一个 iframe ）。

所以你可能会有：

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

在那个widget.js文件中，有这样一段代码：

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

正如代码注释中所提到的那样，使用document.body.appendChild(iframe)可以正常工作，但只会将 iframe 插入到文档的末尾。

我真正想做的是将 iframe 直接插入到脚本标签所在的位置。我尝试了 document.body.appendChild(iframe)，但它似乎什么也没做（没有 iframe 也没有错误）。

那么，我该如何将 iframe 插入到与脚本标签相同的位置呢？

- Shpigford

Answer 1

你需要获取当前的<script>标签, 在这种情况下它是最后一个:

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

并在其后insert<iframe>：

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

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

或者简单地替换当前脚本为<iframe>:

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

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

---

如果你能相信的话，document.write() 实际上是一个合适的解决方案，只要你在文档加载时进行操作，而不是在 window.onload 回调函数中：

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

createIframe();

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

- Matt Ball

---

nextSibling仅支持IE9及以上版本 https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.nextSibling - Bogdan Gusiev

谢谢提醒，但我完全不希望在我写的代码中支持旧版的IE浏览器。jQuery 2版本已于2013年4月发布并且不支持IE低于9.现在是时候向前迈进了。 - Matt Ball

var thisScript = document.scripts[document.scripts.length - 1]; 只有在当前脚本没有使用async或defer属性嵌入，并且不是通过异步写入插入的情况下，才会返回该脚本。 - Michael

现在你可以使用 document.currentScript 来获取加载当前脚本的确切脚本标签。支持除 IE 以外的所有浏览器 -> https://caniuse.com/document-currentscript - hiddentao

Answer 2

在您的<script>元素中添加一个ID，并从DOM中查询该元素，例如<script id="myscript" src="http://example.com/widget.js" class="widget" async></script>。

在widget.js中：

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

- Richard Cook