兼容的动态加载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【原】的更多相关文章

  1. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  2. 动态加载js文件

    由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...

  3. 动态加载js,css

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...

  4. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  5. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  6. 动态加载JS脚本的4种方法

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  7. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  8. JS动态加载 js css

    1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...

  9. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

随机推荐

  1. jquery中获取radio选中值的正确写法

    错误写法: //只在IE下有作用,其他浏览器均获取的为第一个单选框的值 $('input[type=radio]').val(); 正确写法为: //兼容所有浏览器写法 $('input[type=r ...

  2. 【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] \* ...

  3. 阿里云ali-oss图片增加水印

    先附上文档连接 : https://helpcdn.aliyun.com/document_detail/44957.html 水印文字或图片必须经过一下转化 URL安全的Base64位编码 在图片处 ...

  4. python之web框架(2):了解WSGI接口

    python之web框架(2):了解WSGI接口 1.什么是wsgi接口: wsgi:Web Service Gateway Interface.它不是模块,而只是一种规范,方便web服务器和各种框架 ...

  5. css盒子垂直居中

    首先父盒子包住子盒子 <body> <div class="outbox"> <div class="box"></d ...

  6. 纯CSS实现3D图像轮转

    CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...

  7. CodeForces - 725D Contest Balloons 贪心

              D. Contest Balloons          time limit per test 3 seconds         memory limit per test 2 ...

  8. mysql数据库查询表中相邻数据的差值

    select a.time ,a.sum - b.sum sum,a.time,b.time from ( rownum,) t order by time) a, ( rownum ,) t ORD ...

  9. bzoj——2127: happiness

    2127: happiness Time Limit: 51 Sec  Memory Limit: 259 MBSubmit: 2570  Solved: 1242[Submit][Status][D ...

  10. python中%r和%s的区别

    %r用rper()方法处理对象 %s用str()方法处理对象 有些情况下,两者处理的结果是一样的,比如说处理int型对象. 例一: print "I am %d years old.&quo ...