Wstawianie elementu iframe w bieżącej lokalizacji znacznika skryptu?

Question

Mam coś, co nazwiemy "widżetem" ... i chcę wstawić ten widget (ostatecznie tylko iframe) w bieżącym położeniu znacznika skryptu.

Więc może masz:

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

W tym pliku widget.js, tam jest taka:

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

A jak zauważono w komentarzu kodu robi document.body.appendChild(iframe) działa dobrze, ale po prostu wstawia iframe na samym końcu dokumentu.

Ale tak naprawdę chcę tylko wstawić element iframe tam, gdzie znajduje się znacznik skryptu. Ta document.body.appendChild(iframe) jest moją próbą, ale dosłownie po prostu nie wydaje się nic robić (brak iframe i brak błędów).

Jak zatem wstawić element iframe w tym samym miejscu, co znacznik skryptu?

Answer 1

Trzeba get the current <script> tag, która w tym przypadku jest ostatnia:

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

i insert po nim:

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

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

Albo po prostu replace obecny skrypt z :

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

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

---

Alternatywnie - jeśli można wierzyć, że - document.write() jest rzeczywiście odpowiednie rozwiązanie tutaj, tak długo, jak to zrobić gdy dokument jest ładowanie a nie w window.onload callback:

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

createIframe(); 

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

Answer 2

Dodaj identyfikator do swojego elementu <script> i zapytaj o ten element z DOM, np. <script id="myscript" src="http://example.com/widget.js" class="widget" async></script>.

W widget.js:

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