7

我有一个我们称之为“小部件”的东西......我想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 插入到与 script 标签相同的位置？

4

2 回答 2

14

您需要获取当前<script>标签，在本例中是最后一个：

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

并在其后插入<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

于 2013-02-26T04:37:14.997 回答
1

为您的元素添加一个 ID<script>并从 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);
于 2013-02-26T04:42:27.773 回答