Ajax 动态载入html页面后不能执行其中的js快速解决方法
时间:2019-04-20
本文章向大家介绍Ajax 动态载入html页面后不能执行其中的js快速解决方法,主要包括Ajax 动态载入html页面后不能执行其中的js快速解决方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件背景
有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js。
解决思路
1. 采用附加一个iframe的方法去执行js,为我等代码洁癖者所不齿。
2. 使用document.write输出代码,我等简洁主义者所不愿。
3. 最简单的方法是把js放到需要调用的父页面,那想这样的公用页面,每个地方调用都要写入一次,代码冗余。
4. eval是个解决方法,虽然低效。
5. 复杂的解决方法:正则匹配出加载页面中的所有js,为这些js创建同样多个<script>标签,把js内容插入即可执行。但使用中发现,firefox可行,但IE还是不从。(师太,您就从了吧~)
解决方案
综合以上多种方式,排除不利因素,总结出一个比较实用的方法,可以满足类似这样公用页面的执行ajax加载的js的需求,在ajax加载的公用函数里面加上代码即可。主要代码如下:
// 第一步:匹配加载的页面中是否含有js var regDetectJs = /<script(.|\n)*?>(.|\n|\r\n)*?<\/script>/ig; var jsContained = ajaxLoadedData.match(regDetectJs); //ajaxLoadedData为ajax获取到的数据 // 第二步:如果包含js,则一段一段的取出js再加载执行 if(jsContained) { // 分段取出js正则 var regGetJS = /<script(.|\n)*?>((.|\n|\r\n)*)?<\/script>/im; // 按顺序分段执行js var jsNums = jsContained.length; for (var i=0; i<jsNums; i++) { var jsSection = jsContained[i].match(regGetJS); if(jsSection[2]) { if(window.execScript) { // 给IE的特殊待遇 window.execScript(jsSection[2]); } else { // 给其他大部分浏览器用的 window.eval(jsSection[2]); } } } }
解说下:window.execScript就IE认,其他浏览器需要用eval啦。
总结
以上所述是小编给大家介绍的Ajax 动态载入html页面后不能执行其中的js快速解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 用python抓取摩拜单车API数据并做可视化分析(源码)
- 用Pandas在Python中可视化机器学习数据
- Intent 属性详解(下)
- 把复杂json解析成javabean思路:思路:
- Python数据科学计算库的安装和numpy简单
- 4G安全:研究人员发现攻击4G无线上网卡和SIM卡的方法
- Python文学化编程 - Jupyter notebook使用和插件拓展
- PoisonCake(毒蛋糕):内置于手机ROM的恶意代码模块
- Spring+SpringMVC+MyBatis整合
- Python之numpy数组学习(五)——广播
- WordPress再悲剧:WPcache-Blogger感染事件影响五万WordPress网站
- 浅谈神经机器翻译
- 窃取Facebook用户信息:利用Android同源策略漏洞的恶意应用被发现
- 关于React Native 安卓首屏白屏优化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法