在div內容更改後再次運行JavaScript

Question

當我在第一次將JavaScript腳本附加到div時，它會使用外部數據和佈局填充我的div。但是，當我在與相同的JavaScript同一實例做一遍......注意到發生

$('#JsModelSubmit').on('click',function(e){ 
    e.preventDefault(); 
    $('.poptin-popup .js-container').empty(); 
    $('#os-widget-jssdk').remove(); // Delete the script from the DOM 
    setTimeout(function(){ 
     $('.poptin-popup .js-container').append($('#AddJsInput').val()); 
    },300) 

    $('.poptin-popup .js-container').attr('data-script',$('#AddJsInput').val()); 
    $(".poptin-popup .thumbnail-js").attr('src','').fadeOut(); 
    $("#addJsModel").fadeOut(); 
}); 

和示例腳本，我追加爲：

<script type="text/javascript"> 
(function(d, s, id){ 
var js, 
fjs = d.getElementsByTagName(s)[0], 
r = Math.floor(new Date().getTime()/1000000); 
if (d.getElementById(id)) {return;} 
js = d.createElement(s); js.id = id; js.async=1; 
js.src = "https://www.opinionstage.com/assets/loader.js?" + r; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'os-widget-jssdk')); 
</script><div class="os_widget" data-comments="false" data-of="outbraininteractive" data-path="/outbraininteractive/quiz-novice-or-wiz-test-your-digital-marketing-skills" id="os-widget-39833"></div> 

第一次

這是我得到的結果：

第二次等等這是我得到的結果是：

這裏是的jsfiddle：

https://jsfiddle.net/86c9vkog/3/

請幫幫忙！謝謝！

Answer 1

JavaScript加載並執行後，它與加載它的腳本元素之間沒有任何關聯。所以，我們不能刪除它。

但是，通過使用iFrame我們可以繞過這種行爲。

查看demo here。

爲什麼iFrame有效？

根據定義，iFrame嵌入一個新的文檔context。所以，原始頁面context和iFrame頁面上下文是不同的。無論附在iFrame屬於它自己的上下文。

HTML元素代表一個嵌套的瀏覽上下文，有效地嵌入到當前頁面的另一個HTML頁面。在HTML 4.01中，文檔可能包含頭部和身體，頭部和框架集，但不包括正文和框架集。但是，可以在正常的文檔體內使用。每個瀏覽上下文都有自己的會話歷史和活動文檔。包含嵌入內容的瀏覽上下文稱爲父瀏覽上下文。頂級瀏覽上下文（沒有父代）通常是瀏覽器窗口。

瞭解更多here。

$(document).on('click','#JsModelSubmit',function(e){ 
 
\t e.preventDefault(); 
 
\t $('#js-container').empty(); 
 
    iframe($('#AddJsInput').val()); 
 
}); 
 
function iframe(script){ 
 
    var iframe = document.createElement('iframe'); 
 
    iframe.setAttribute('id', 'iframeId'); 
 
    iframe.setAttribute('src', 'about:blank'); 
 
    var adContainer = document.getElementById('js-container'); 
 
    adContainer.appendChild(iframe); 
 
    var doc = iframe.contentWindow || iframe.contentDocument; 
 
    if (doc.document){ 
 
    doc = doc.document 
 
    } 
 

 
    doc.open(); 
 
    doc.write(script); 
 
    doc.close(); 
 
}

#js-container{ 
 
    background:red; 
 
    width:960px; 
 
    heigth: 750px; 
 
} 
 
iframe{ 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="js-container">asdasdasd</div> 
 
<textarea id="AddJsInput" rows="10" cols="1000"></textarea> 
 
<button id="JsModelSubmit">Append</button> 
 

 
<!-- Append this js code 
 

 
<script type="text/javascript"> 
 
(function(d, s, id){ 
 
var js, 
 
fjs = d.getElementsByTagName(s)[0], 
 
r = Math.floor(new Date().getTime()/1000000); 
 
if (d.getElementById(id)) {return;} 
 
js = d.createElement(s); js.id = id; js.async=1; 
 
js.src = "https://www.opinionstage.com/assets/loader.js?" + r; 
 
fjs.parentNode.insertBefore(js, fjs); 
 
}(document, 'script', 'os-widget-jssdk')); 
 
</script><div class="os_widget" data-comments="false" data-of="outbraininteractive" data-path="/outbraininteractive/quiz-novice-or-wiz-test-your-digital-marketing-skills" id="os-widget-39833"></div> 
 

 
-->

Answer 2

其實，問題是，當loader.js加載它第一次創建OpinionStage對象，當它的加載第二次，因爲OpinionStage對象已存在它不會再這樣做初始化。

要創建片段，您需要在創建腳本元素之前添加window.OpinionStage = null。

<script type="text/javascript"> 
(function(d, s, id){ 
var js, 
fjs = d.getElementsByTagName(s)[0], 
r = Math.floor(new Date().getTime()/1000000); 
if (d.getElementById(id)) {return;} 
window.OpinionStage = null; 
js = d.createElement(s); js.id = id; js.async=1; 
js.src = "https://www.opinionstage.com/assets/loader.js?" + r; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'os-widget-jssdk')); 
</script><div class="os_widget" data-comments="false" data-of="outbraininteractive" data-path="/outbraininteractive/quiz-novice-or-wiz-test-your-digital-marketing-skills" id="os-widget-39833"></div>