在當前腳本標籤位置插入iframe？

我已經得到了我們稱之爲「小部件」的內容......並且我想在腳本標記的當前位置插入該小部件（最終只是一個iframe）。在當前腳本標籤位置插入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插入與腳本標籤相同的位置？

來源

2013-02-26 Shpigford

您需要get the current <script> tag，在這種情況下是最後一個：

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

和insert它後：

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

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

或者乾脆replace當前腳本與：

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-26 04:37:14

nextSibling只因爲IE9 https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.nextSibling – 2013-12-20 09:36:31

感謝擡頭支持，但我完全不支持在我編寫的任何代碼中支持傳統IE。 [jQuery 2於2013年4月發佈]（http://blog.jquery.com/2013/04/18/jquery-2-0-released/），不支持IE <9。是時候繼續前進了。 – 2013-12-20 17:11:15

var thisScript = document.scripts [document.scripts.length - 1]; 只會給你當前的腳本，如果它沒有嵌入使用異步或推遲屬性，而不是通過異步寫入插入。 – Michael 2016-11-17 18:29:57

向您的<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);

來源

2013-02-26 04:42:27

在當前腳本標籤位置插入iframe？

回答

相關問題