位置：首页>> 网络编程>> JavaScript>> 让插入到 innerHTML 中的 javascript 跑起来

让插入到 innerHTML 中的 javascript 跑起来

　来源：经典论坛　发布时间：2008-07-01 13:14:00　

标签：innerHTML,javascript,代码

andot提出问题：

在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们的程序得不到预期的结果。因此我们需要解决这个问题。

由于andot的解决方法不允许转载，想看的朋友点击文章来源。

Sheneyan 问：

<script> document.write("asdfdsf"); </script>

这种类型的脚本如何处理？

bound0 答：

对于write和writeln这两个函数的办法就是把它们覆盖(或重载)掉。

<head><script></script></head><body><textarea id="inputbox" cols="80" rows="25"><script>document.write("就")</script><script>document.write("这")</script><script>document.write("么")</script><script>document.write("么")</script><script>document.write("办")</script><script>document.write("吧")</script><script>document.write("?")</script><script>document.writeln("好吗?")</script></textarea><br /><button onclick="set_innerHTML('container', document.getElementById('inputbox').value);">开始演示</button><div id="container" style="width: 640px; height: 480px; border: 1px solid #cccccc;"></div></body>

但是对于src为独立文件的代码，需要先调用xmlhttp等控件取得代码内容，而这一步将沦为安全性受限步骤。

起初我也考虑过直接重新定义 document.write 和 document.writeln ，但是在效果和副作用之间徘徊不定，如今看来是利大于弊的，还是andot兄弟能够当机立断。

外部脚本的加载问题恐怕还是得用xmlhttp，用延时的办法终究还是不保险。 hutia兄弟说的作用域的问题在 this 的指向上会有所体现。这些地方我们还得想办法改进。

还有一点就是通过document.write写脚本的情况我还没考虑。一步一步慢慢来吧！

document.write的定位问题可以通过对html代码和script代码的统筹施放来实现。

用document.write()写scripts的问题也已经解决了！

需要5.5+版本的scripts引擎（支持数组方法）

示例如下：

<head><script></script></head><body><textarea id="inputbox" cols="80" rows="25"><h1>这东西越来越有意思了！</h1><script>document.writeln("<b><font color=green>赫赫！</font></b><script>document.write('<b><font color=yellow>OK!</font></b>')</scr"+"ipt><script>document.write('<b><font color=yellow>OK!</font></b>')</scr"+"ipt><script>document.write('<b><font color=yellow>OK!</font></b>')</scr"+"ipt><script>document.writeln('<b><font color=yellow>OK!</font></b>')</scr"+"ipt>")</script><b><font color=red>是吧？</font></b><script>document.write("<b><font color=blue>嘿嘿！</font></b>")</script></textarea><br /><button onclick="startShow(('container'), document.getElementById('inputbox').value);">开始演示</button><div id="container" style="width: 640px; height: 480px; border: 1px solid #cccccc;"></div></body>

<head><script></script></head><body><textarea id="inputbox" cols="80" rows="25">测试：<script>document.writeln("已经接近完美……")alert("但在执行顺序上还是有点问题！")alert("比如说这两个alert()")document.write("<script>document.write('主要原因是因为没有直接释放到目标元素，而是使用了缓冲。')</scr"+"ipt>")</script></textarea><br /><button onclick="startShow(('container'), document.getElementById('inputbox').value);">开始演示</button><div id="container" style="width: 640px; height: 480px; border: 1px solid #cccccc;"></div></body>

hutia 答：

不过说实在话我觉得为了这个东西花费太多精力不值得......如果你只是为了让script跑起来,可以这样:

theScriptToRun=xmlHttp.responseText; //取得要运行的代码 var theTempIFrame=document.createElement("IFRAME"); theTempIFrame.style.display="none"; //创建一个隐藏的IFRAME document.body.appendChild(theTempIFrame); theFrameElement=window.frames[window.frames-1]; theFrameElement.document.open(); theFrameElement.document.clear(); theFrameElement.document.write(theScriptToRun); theFrameElement.document.close(); //写入要执行的代码 theTempIFrame.outerHTML=""; //删除IFRAME元素

这种方法就是通过将HTML写入IFrame中来执行,原理类似论坛的运行代码功能,优点是不论写入的代码形式如何一律通吃,缺点是代码本身需要针对这种方式来写,引用页面元素的时候得用parentWindow.xxx来引用

投稿

让插入到 innerHTML 中的 javascript 跑起来

猜你喜欢