解决ajax返回innerHTML中javascript不能运行问题
发布时间：2020-12-15 21:06:47 所属栏目：百科 来源：网络整理
导读：原文地址：http://blog.csdn.net/yehell/article/details/2232326 在实际应用的过程中，我们经常会遇到使用ajax返回某一个网页的内容到模版页面的某一个div标签中显示的操作。如果返回的值仅仅是文本类数据不会影响模版页面的功能，但是如果返回的数据包括jav
|
原文地址：http://blog.csdn.net/yehell/article/details/2232326
在实际应用的过程中，我们经常会遇到使用ajax返回某一个网页的内容到模版页面的某一个<div>标签中显示的操作。如果返回的值仅仅是文本类数据不会影响模版页面的功能，但是如果返回的数据包括javascript，那么直接innerHTML到模版页的这段脚本是不会被运行的。原因在于浏览器只在显示模版时才解析javascript，而使用ajax返回的js是被后期倒入的并没有被解析，所以调用的时候找不到对应的function()。 想要解决这个问题，最基本的方法就是需要让浏览器可以同时解析<div>标签中的js。如果单适用IE浏览器，最简单的方式就是在<div>中的<script>标签中添加属性defer，它可以通知IE该脚本需要异步解析。但是令人头痛的是Firfox的标准总是和IE有着各种各样的不同，由于FF不支持defer所以使得开发者不得不另辟蹊径来解决这个问题。 实际上，我们可以在ajax返回数据并innerHTML到模版之前先把<div>中的javascript取出并写到模版页面的<head>中让浏览器解析。这样就相当于在打开模版页面的同时加载了所有<div>标签需要的javascript。奇怪的是这些脚本必须添加在<head>标签中FF才能有效，如果有人知道原因希望可以指点偶一下。 实现方法举例：
function
get_div_content(divid)
{
varxmlHttp=GetXmlHttpObject(); url"http://+document.location.host/divpage.jsp?id=divid&random=Math.random(); div_content_iddrag_content_divid; if(xmlHttp==null) { alert(AJAX初期化失敗!); return; } xmlHttp.onreadystatechangefunction()(xmlHttp.readyState<4){ document.getElementById(div_content_id).innerHTMLLoading... ){ //用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容。 reg_onload/<bodyonLoad([^<]*)>/; match_onloadxmlHttp.responseText.match(reg_onload); //用正则表达式匹配ajax返回的text中是否有<script>，如果存在则取出标签内部的内容。 regscript[^>]*>([sS]*)/scriptmatchxmlHttp.responseText.match(reg); var MyScript = "" ; if (match != null ) { MyScriptmatch[1]; document.createElement();//在模版页创建新的<script>标签 script.textMyScript;//给新的script标签赋值 document.getElementsByTagName(head)[0].appendChild(script);//把该标签加入<head> } Html xmlHttp.responseText.replace(reg, );//将剩下的text祛除<script>部分，插入模版页 document.getElementById(div_content_id).innerHTML Html; (match_onload ) { eval(match_onload[]);//如果存在onload方法，则调用； } } xmlHttp.open( " GET ,url,255)">true ); xmlHttp.send( ); } test.html <
table
>
script
type
="text/javascript"
defer
="defer"
>
functiontest(){alert('测试下，用ajax的话，这段代码也会执行的！);} </ script tbody tr td >< input onclick ="test()" value ="clickme" ="button" ></ > （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |