施行AJAX返回HTML片段中的JavaScript脚本
日期：2014-05-17 浏览次数：20744 次
执行AJAX返回HTML片段中的JavaScript脚本
如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本<script>块，那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中，你会发现AJAX加载回来的脚本根本没有执行。这是AJAX开发中很常见的问题，如果你不是一直在用JavaScript框架做开发，相信你早就发现这个问题了。本文分析了两个解决办法，其中一个是讲解jQuery框架的实现。
一、 问题描述
下面举个简单的例子，演示问题所在。在下面的例子中，假设变量responseText就是AJAX加载的HTML片段数据，其中包含脚本弹出一条消息，用innerHTML方法插入ID为ajaxData的DIV中，你可能期望看到弹出那个消息框，结果你发现没有，问题就是这样。
<div?id="ajaxData"></div>
<script?type="text/javascript">
var?responseText?=?'<p>这是一个段落</p><script>alert("这是AJAX加载回来的脚本片段")</script>';
document.getElementById('ajaxData').innerHTML?=?responseText;
</script>
<script?type="text/javascript">
var?responseText?=?'<p>这是一个段落</p><script>alert("这是AJAX加载回来的脚本片段")</script>';
document.getElementById('ajaxData').innerHTML?=?responseText;
</script>
二、两种解决办法
1、 利用JavaScript的eval方法执行脚本。
本方法的具体实现思路是把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可。下面提供一个封装好的函数：
function?executeScript(html)
{
????var?reg?=?/<script[^>]*>([^/x00]+)$/i;
????//对整段HTML片段按<//script>拆分
????var?htmlBlock?=?html.split("<//script>");
????for?(var?i?in?htmlBlock)?
????{
????????var?blocks;
{
????var?reg?=?/<script[^>]*>([^/x00]+)$/i;
????//对整段HTML片段按<//script>拆分
????var?htmlBlock?=?html.split("<//script>");
????for?(var?i?in?htmlBlock)?
????{
????????var?blocks;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
