如何从HTML字符串动态添加脚本到网页

How to dynamically add scripts to webpage from an HTML string?

本文关键字：添加 脚本 网页 动态 字符串 HTML      更新时间：2023-09-26

假设我有一个名为html的字符串，其中包含以下内容：

<script>
    document.write("Some random stuff here");
</script>
<script src="someremotejsfile"></script>

我想在iframe窗口中动态地显示它。

我最初的解决方案是：

document.open();
document.write(html);
document.close();

但这会在firefox中造成问题，即使内容已经加载，微调器也会一直旋转，好像它永远在加载一样。我的下一次尝试是：

document.body.innerHTML = html;

这会将脚本添加到主体中，但实际上并没有执行它们。所以最后我尝试了：

div = document.createElement("div");
div.innerHTML = html;
document.body.appendChild(div);

但这似乎也不会执行html字符串中的脚本。

所以我的问题是，给定一个html字符串，我如何动态地将它添加到页面中？例如，它可以是一个广告标签，其中包含任意数量的脚本和其他html元素。我无法控制html字符串中的内容。对我来说，这是一个黑框。我只需要能够获取长的html字符串并将其加载到窗口中（在本例中为iframe）。

document.write作品：

<iframe id="ifr"></iframe>
<script type="text/javascript">
   var scr = decodeURIComponent("%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cscript%3Ealert(%27Some%20random%20stuff%20here%27)%3B%3C%2Fscript%3E");
   document.getElementById("ifr").contentWindow.document.write(scr);
   document.getElementById("ifr").contentWindow.document.close();
</script>

（别管编码的URI字符串，只需要它能够将代码<h1>Hello World</h1><script>alert('Some random stuff here');</script>分配给脚本标记

中的字符串变量

如果你使用jQuery，你可以使用.html来加载，它会触发你的脚本

$(document.body).html( $(document.body).html() + htmlToAdd );

如果你不使用jQuery，你可以手动评估你的脚本。。

function appendHTMLtoBody(html){
   var body = document.body;
   var scriptsLoaded = [].slice.apply(body.getElementsByTagName("script"),[0]);
   for(var i = 0; i < scriptsLoaded.length; i++){
       scriptsLoaded[i].setAttribute("data-loaded","true");
   }
   body.innerHTML += html;
   var allScripts = body.getElementsByTagName("script");
   for(var i = 0; i < allScripts.length; i++){

      if( allScripts[i].getAttribute("data-loaded") !== "true" ){
         var script = allScripts[i].innerHTML;
         eval(script);
      }
   }
}

我想会解决你的问题。

相关文章：