让插入到 innerHTML 中的 javascript 跑起来

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

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,代码

投稿

让插入到 innerHTML 中的 javascript 跑起来

猜你喜欢

给年青设计师们的十条经验教训

MySQL安装配置方法教程

IE浏览器兼容Firefox的JS脚本的代码

Go 实现 WebSockets和什么是 WebSockets

在ASP处理程序时，进度显示

公众号接入chatGPT的详细教程附Python源码

来看看如何防止采集

Python unittest 自动识别并执行测试用例方式

Python编程中的异常处理教程

Windows下PyCharm2018.3.2 安装教程(图文详解)

Python IDE Pycharm中的快捷键列表用法

turtle的基础使用之python turtle递归绘图

vue实现图片懒加载的方法分析

httpwatch 的页面元素加载时间表

浅谈Python脚本开头及导包注释自动添加方法

如何利用python实现windows的批处理及文件夹操作

Python中高阶函数的小实践分享

Python正则表达式中的'r'用法总结

Python进程池基本概念

python apscheduler cron定时任务触发接口自动化巡检过程

让插入到 innerHTML 中的 javascript 跑起来

猜你喜欢

给年青设计师们的十条经验教训

MySQL安装配置方法教程

IE浏览器兼容Firefox的JS脚本的代码

Go 实现 WebSockets和什么是 WebSockets

在ASP处理程序时，进度显示

公众号接入chatGPT的详细教程 附Python源码

来看看如何防止采集

Python unittest 自动识别并执行测试用例方式

Python编程中的异常处理教程

Windows下PyCharm2018.3.2 安装教程(图文详解)

Python IDE Pycharm中的快捷键列表用法

turtle的基础使用之python turtle递归绘图

vue实现图片懒加载的方法分析

httpwatch 的页面元素加载时间表

浅谈Python脚本开头及导包注释自动添加方法

如何利用python实现windows的批处理及文件夹操作

Python中高阶函数的小实践分享

Python正则表达式中的'r'用法总结

Python进程池基本概念

python apscheduler cron定时任务触发接口自动化巡检过程

公众号接入chatGPT的详细教程附Python源码