当前位置: 秋叶网络博客 前端编程 ◊ Ajax重载页面js脚本代码失效的解决办法

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="http://www.mizuiren.com/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,自行更改。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/162.html
目录: 前端编程 | 标签: ajax, 重新加载JS | 13451次阅读