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插入与脚本标记相同的位置？

Answer 1

您需要get the current <script> tag，在这种情况下是最后一个：

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

和insert之后的<iframe>：

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

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

或仅replace使用<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

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

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

2 个答案: