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

Question

假设我有一个名为 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）。

Answer 1

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> 分配给脚本标签内的字符串变量

Answer 2

如果你使用 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);
      }
   }
}

我想会解决你的问题。