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

我认为会解决你的问题。

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

2 个答案: