使用者工具

網站工具


program:javascript:解決ajax叫javascript的問題

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

program:javascript:解決ajax叫javascript的問題 [2008/12/01 09:59] (目前版本)
行 1: 行 1:
 +===== 解决ajax返回innerHTML中javascript不能运行问题 =====
  
 +
 +[[http://​209.85.173.132/​search?​q=cache:​ZJIRmrzZ53UJ:​blog.csdn.net/​yehell/​archive/​2008/​03/​31/​2232326.aspx+%E8%A7%A3%E5%86%B3ajax%E8%BF%94%E5%9B%9EinnerHTML%E4%B8%ADjavascript%E4%B8%8D%E8%83%BD%E8%BF%90%E8%A1%8C%E9%97%AE%E9%A2%98&​hl=zh-TW&​ct=clnk&​cd=2&​gl=tw|來源]]
 +
 + ​在实际应用的过程中,我们经常会遇到使用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才能有效,如果有人知道原因希望可以指点偶一下。
 +
 +实现方法举例:
 +<code javascript>​
 +function get_div_content(divid){
 +        ​
 +  var xmlHttp = GetXmlHttpObject();​
 +  var url = "​http://"​ + document.location.host + "/​divpage.jsp?​id="​+divid+"&​random="​+Math.random();​
 +  var div_content_id = "​drag_content_"​+divid;​
 +  var xmlHttp=GetXmlHttpObject();​
 +
 +  if (xmlHttp==null)
 +  {
 +    alert ("​AJAX初期化失敗!"​);​
 +    return;
 +  }
 +  xmlHttp.onreadystatechange=function(){
 +     
 +    if(xmlHttp.readyState < 4){
 +      document.getElementById(div_content_id).innerHTML="​Loading...";​
 +    }    ​
 +    if(xmlHttp.readyState==4){
 +      //​用正则表达式匹配ajax返回的text中是否有onload,​如果存在则取出内容。 ​
 +        var reg_onload = /<body onLoad="​([^<​]*)">/;​
 +        var match_onload=xmlHttp.responseText.match(reg_onload); ​           ​
 +      //​用正则表达式匹配ajax返回的text中是否有<​script>​,如果存在则取出标签内部的内容。 ​      
 +      var reg = /<​script[^>​]*>​([sS]*)</​script>/;​
 +      var match=xmlHttp.responseText.match(reg);​
 +      var MyScript="";​
 +      if(match!=null){
 +        MyScript=match[1];​
 +        var script=document.createElement("​script"​);//​在模版页创建新的<​script>​标签
 +        script.text=MyScript;//​给新的script标签赋值
 +        document.getElementsByTagName("​head"​)[0].appendChild(script);//​把该标签加入<​head>​
 +      }
 +      var Html=xmlHttp.responseText.replace(reg,""​);//​将剩下的text祛除<​script>​部分,插入模版页
 +      document.getElementById(div_content_id).innerHTML=Html;​
 +      if(match_onload!=null){
 +        eval(match_onload[1]);//​如果存在onload方法,则调用;
 +      }
 +    }
 +  }
 +  xmlHttp.open("​GET",​url,​true);​
 +  xmlHttp.send(null);​
 +}
 +</​code>​
 +test.html
 +<​code>​
 +<​table>​
 +  <script type="​text/​javascript"​ defer="​defer">​
 +  function test(){alert('​测试下,用ajax的话,这段代码也会执行的!'​);​}
 +  </​script>​
 +  <​tbody>​
 +    <tr>
 +      <​td><​input onclick="​test()"​ value="​click me" type="​button"></​td>​
 +    </tr>
 +  </​tbody>​
 +</​table>​
 +</​code>​
program/javascript/解決ajax叫javascript的問題.txt · 上一次變更: 2008/12/01 09:59 (外部編輯)