我已经得到了我们称之为“小部件”的东西……我想在脚本标签的当前位置插入该小部件(最终只是一个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插入与脚本标记相同的位置？
解决方法
你需要
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();
