Chèn khung nội tuyến tại vị trí thẻ tập lệnh hiện tại?

Question

Tôi có thứ mà chúng ta sẽ gọi là "tiện ích con" ... và tôi muốn chèn tiện ích con đó (cuối cùng chỉ là iframe) vào vị trí hiện tại của thẻ tập lệnh.

Vì vậy, bạn có thể có:

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

Trong đó widget.js tập tin, có là thế này:

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

Và như đã nêu trong bình luận mã, làm document.body.appendChild(iframe) hoạt động tốt, nhưng chỉ cần chèn iframe ở cuối tài liệu.

Nhưng những gì tôi thực sự muốn làm là chỉ chèn iframe ngay nơi thẻ script. Đó là document.body.appendChild(iframe) là nỗ lực của tôi vào nó, nhưng nó theo nghĩa đen chỉ dường như không làm bất cứ điều gì (không có khung nội tuyến và không có lỗi).

Vì vậy, làm cách nào để chèn iframe vào cùng một vị trí với thẻ tập lệnh?

Answer 1

Bạn cần phải get the current <script> tag, mà trong trường hợp này là mới nhất:

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

và insert các sau nó:

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

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

Hoặc đơn giản là replace kịch bản hiện tại với số :

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

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

---

Cách khác - nếu bạn có thể tin điều đó - document.write() thực sự là một giải pháp phù hợp ở đây, miễn là bạn làm điều đó trong khi tài liệu được tải và không có trong một window.onload gọi lại:

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

createIframe(); 

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

Answer 2

Thêm ID vào phần tử <script> của bạn và truy vấn phần tử này từ DOM, ví dụ: <script id="myscript" src="http://example.com/widget.js" class="widget" async></script>.

Trong widget.js:

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