兼容的动态加载JS【原】
JS 动态 加载 兼容
2023-09-14 09:10:27 时间
兼容的动态加载JS
屌丝就是悲剧,五一还得宅家里写程序专研技术。
说起动态加载JS,搞web的肯定不陌生,著名的YUI库就有强大的模块化的动态加载JS机制。在代码量不断庞大的今天,动态加载JS作用还是非常明显的。事实上这门技术已经非常古老了,可是发现网络上非常多资料也相同非常古老。诶,没法,自立更生吧,人生总要不断积累的,更何况作为一个程序员呢。
关于动态JS大家比較关注的无非就两点,兼容性怎样?怎样控制是同步还是异步?如今针对常见的4种方案来分析。前3种是异步的,最后1种是同步的。
方法1:
<script type="text/javascript"> document.write("<script src='test.js'><\/script>"); </script>
分析:异步的,兼容性良好(測试了多版本号IE、FF、Chrome),只是你这么写整个HTML文档就被替换成空白的了,document你得想办法改变下。
方法2:
<script src='' id="s1"></script> <script language="javascript"> document.getElementById("s1").src="test.js" </script>
分析:异步的、兼容性非常差(低版本号的IE能够,我的IE10、FF、Chrome都失效了,网上能搜到原因),应该直接放弃这个方法。
方法3
<script type="text/javascript"> var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src="test.js"; oHead.appendChild( oScript); </script>
分析:、异步的、兼容性良好(測试了多版本号IE、FF、Chrome),其它不多说,强烈推荐。
方法4
<script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function() { //async为false的时候是同步的 //dataType为script的时候已经帮你把返回结果用script类型的dom元素加入�到文档中了,假设跨域,POST会转换为GET $.ajax({ type: 'GET', url:'test.js', async:false, dataType,'script'}) }); </script>
分析:使用xmlHttpRequest的动态载入技术,说白了就是ajax,事实上就是在上述三种方法的基础上包装上一层ajax而已,同步异步你自己控制,兼容性怎样得看你用哪种方法实现了,我给的样例直接使用了jquery库,兼容性很好,并且你不须要写一堆关于xmlHttpRequest的东西,若你不想用第三方库,那自己百度个手工实现ajax吧。
相关文章
- js require 动态加载 变量目录的js数据。
- JS 学习笔记 (七) 面向对象编程OOP
- 用js分类刷leetcode3.动态规划(图文视频讲解)
- JS动态设置对象的属性名
- Js 如何为对象拓展一个动态属性
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- js动态往对象里边添加一项详解编程语言
- 动态加载Js代码到Head标签中的脚本
- 动态添加js事件实现代码
- 动态样式类封装JS代码
- js左侧多级菜单动态的解决方案
- JS函数验证总结(方便js客户端输入验证)
- CSS和JS标签style属性对照表(方便js开发的朋友)
- JS中动态添加事件(绑定事件)的代码
- js动态文字滚动的例子
- js动态加载以及确定加载完成的代码
- Google的跟踪代码动态加载js代码方法应用
- 动态加载js和css(外部文件)
- JS实现商品倒计时实现代码
- js动态为代码着色显示行号
- js动态创建表格,删除行列的小例子
- js动态加载事件的几种方法总结
- js动态拼接正则表达式的两种方法
- js调试系列断点与动态调试[基础篇]
- 直接在JS里创建JSON数据然后遍历使用
- js动态修改css文件的方法
- 一个简单的动态加载js和css的jquery代码