半调
qrcode

扫码用手机继续看

Ajax重载页面js脚本代码失效的解决办法

半调2015-06-30人生经验 1009 0A+A-

如今Ajax的流行同时也带来了许多小困惑,因为是页面的异步分离加载,导致html和js不是同时进行的,有些是函数取不到元素,有些是绑定不了事件,还有就是内嵌脚本压根不执行。这些问题对于初学者来说更是摸不着头脑。这里整理了两个针对不同原因围绕重载页面代码js脚本失效的解决方法。

  1. 一个是头部外链已经引入的js文件里面的代码功能在重载页面后失效的解决办法:解决的办法就是在ajax的回调函数重新通过脚本创建加载一遍该js文件地址,以下是代码,简单明了:

  2. var aa=document.getElementsByTagName('HEAD').item(0);
    var nn=document.createElement("script");
    nn.src="http://www.baidu.com/xxx.js";
    aa.appendChild(nn);

    只要修改此处src地址为js文件地址就可以用了

  3. 第二种是内联的javascript脚本不执行导致的异常。这种脚本通常是把代码直接插在html中,如:

  4. <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,自行更改。

打赏 支付宝打赏 微信打赏
本文标题:Ajax重载页面js脚本代码失效的解决办法
本文链接:https://54.sb/post/601.html
作者授权:除特别说明外,本文由 Exciting 原创编译并授权 半调 刊载发布。
版权声明:本文使用「署名-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

发表评论

加入我们吧!登录注册
登录
用户名
密码
注册
用户名
密码
确认密码
昵称
邮箱
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱