兼容的动态加载JS【原】
兼容的动态加载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【原】的更多相关文章
- javascript动态加载js文件主流浏览器兼容版
一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 动态加载js文件
由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...
- 动态加载js,css
今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- 动态加载JS脚本的4种方法
实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- JS动态加载 js css
1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...
- 动态加载JS过程中如何判断JS加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
随机推荐
- jquery中获取radio选中值的正确写法
错误写法: //只在IE下有作用,其他浏览器均获取的为第一个单选框的值 $('input[type=radio]').val(); 正确写法为: //兼容所有浏览器写法 $('input[type=r ...
- 【LOJ】#2026. 「JLOI / SHOI2016」成绩比较
题解 用\(f[i][j]\)表示考虑了前i个排名有j个人被碾压 \(f[i][j] = f[i - 1][k] \* C[k][j] \* C[N - k - 1][N - r[i] - j] \* ...
- 阿里云ali-oss图片增加水印
先附上文档连接 : https://helpcdn.aliyun.com/document_detail/44957.html 水印文字或图片必须经过一下转化 URL安全的Base64位编码 在图片处 ...
- python之web框架(2):了解WSGI接口
python之web框架(2):了解WSGI接口 1.什么是wsgi接口: wsgi:Web Service Gateway Interface.它不是模块,而只是一种规范,方便web服务器和各种框架 ...
- css盒子垂直居中
首先父盒子包住子盒子 <body> <div class="outbox"> <div class="box"></d ...
- 纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
- CodeForces - 725D Contest Balloons 贪心
D. Contest Balloons time limit per test 3 seconds memory limit per test 2 ...
- mysql数据库查询表中相邻数据的差值
select a.time ,a.sum - b.sum sum,a.time,b.time from ( rownum,) t order by time) a, ( rownum ,) t ORD ...
- bzoj——2127: happiness
2127: happiness Time Limit: 51 Sec Memory Limit: 259 MBSubmit: 2570 Solved: 1242[Submit][Status][D ...
- python中%r和%s的区别
%r用rper()方法处理对象 %s用str()方法处理对象 有些情况下,两者处理的结果是一样的,比如说处理int型对象. 例一: print "I am %d years old.&quo ...