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

实际上问题是当第一次创建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> 。

clubTamal

Answer 2

加载并执行JavaScript后，它与加载它的脚本元素之间没有任何关联。所以，我们无法删除它。

但是，通过使用iFrame，我们可以绕过此行为。

请参阅demo here。

为什么iFrame有效？

根据定义，iFrame会嵌入新文档context。因此，原始页面context和iFrame页面上下文不同。任何与iFrame相关的内容都属于它自己的背景。

  

HTML元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和主体或头部和框架集，但不包含主体和框架集。但是，可以在普通文档正文中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

了解详情here。

＆＃13;

＆＃13;

$(document).on('click','#JsModelSubmit',function(e){
	e.preventDefault();
	$('#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();
}

＆＃13;

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

＆＃13;

<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>

-->

＆＃13;

＆＃13;

＆＃13;