Ajax重载页面js脚本代码失效的解决办法
作者:秋了秋 发表时间:2014年11月01日
如今Ajax的流行同时也带来了许多小困惑,因为是页面的异步分离加载,导致html和js不是同时进行的,有些是函数取不到元素,有些是绑定不了事件,还有就是内嵌脚本压根不执行。这些问题对于初学者来说更是摸不着头脑。这里整理了两个针对不同原因围绕重载页面代码js脚本失效的解决方法。
1.一个是头部外链已经引入的js文件里面的代码功能在重载页面后失效的解决办法:解决的办法就是在ajax的回调函数重新通过脚本创建加载一遍该js文件地址,以下是代码,简单明了:
var aa=document.getElementsByTagName('HEAD').item(0); var nn=document.createElement("script"); nn.src="//netblog.cn/omm.js"; aa.appendChild(nn);
红色的为js文件地址,只要修改这一处就可以用了
2.第二种是内联的javascript脚本不执行导致的异常。这种脚本通常是把代码直接插在html中,如:
<div id="qiuye"></div> <script>alert("这是直接混在html中的js代码")</script> </script>
然后我们通过ajax得到这段html代码并把它插在网页的另一个地方就会出现<script>代码完全不起作用了。解决办法就是在ajax请求操作完成后。分析请求回来的html,用正则匹配找出<script>代码块,通过eval手动把这些代码块运行一遍。函数代码如下:
function evalScript(html) { var reg = /<script[^>]*>([^\x00]+)$/i; var htmlBlock = html.split("<\/script>"); for (var i in htmlBlock) { var blocks; if (blocks = htmlBlock[i].match(reg)) { var code = blocks[1].replace(/<!--/, ''); try {eval(code)} catch (e) {console.log(e);} }}}
调用方法就是:evalScript($('#' + ajaxcontent).html());
红色部分为ajax请求回来html,自行更改。
3
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/162.html