动态加载js
来源:互联网 发布:网络工具软件 编辑:程序博客网 时间:2024/05/19 15:42
1,如何动态加载js文件,并且加载完成之后调用其中的函数呢?
- function loadJs(url, callback) {
- var done = false;
- var script = document.createElement('script');
- script.type = 'text/javascript';//do not 'application/javascript',because Low version of the browser is not compatible
- script.language = 'javascript';
- script.charset = "utf-8";
- script.src = url;
- //script.setAttribute('src', url);
- script.onload = script.onreadystatechange = function () {
- if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {
- done = true;
- script.onload = script.onreadystatechange = null;
- if (callback) {
- console.log('load '+url+' success.');
- callback.call(script);
- }
- }
- };
- document.getElementsByTagName("head")[0].appendChild(script);
- };
loadJs 功能:
动态加载js文件,即异步加载js文件,
并且在回调函数中可以调用该js文件中的函数或变量
实例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- ul, li {
- /*list-style: outside none none;*/
- list-style-type: none;
- margin-left: 0;
- }
- li label {
- width: 20%;
- float: left; /* It is necessary */
- }
- li.button {
- text-align: center;
- margin-left: -40px;
- }
- input.errorBorder {
- border: solid 1px #ff0000;
- }
- </style>
- <script type="text/javascript" src="page.js" ></script>
- <script type="text/javascript" src="jquery-1.11.1.js" ></script>
- <script type="text/javascript" src="common_util.js" ></script>
- </head>
- <body>
- <form action="">
- <ul style="width: 400px">
- <li>
- <label for="username">用户名</label><input id="username" type="text"/> <span>用户名不能为空</span>
- </li>
- <li>
- <label for="password">密码</label><input id="password" type="text"/>
- </li>
- </ul>
- </form>
- <script type="text/javascript">
- loadJs('jplaceholder.js', function () {
- $('#username').placeholder({
- word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 3, minLen: 2, errorBorderClass: 'errorBorder',
- keyup_callback: function () {
- console.log('keyup_callback');
- },keydown_callback: function () {
- console.log('keydown...');
- }
- });
- $('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {
- console.log('callback');
- });
- });
- </script>
- </body>
- </html>
相同功能的方法有:
- function loadJS2(url, callback) {
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.charset = "utf-8";
- if (script.readyState) { // 兼容IE的旧版本
- script.onreadystatechange = function () {
- if (script.readyState == 'loaded' || script.readyState == 'complete') {
- script.onreadystatechange = null;
- callback();
- }
- }
- }
- else {
- script.onload = function () {
- callback();
- }
- }
- script.src = url;
- document.getElementsByTagName('head')[0].appendChild(script);
- }
- function xhrLoadJS(url, callback) {
- var xhr = createXHR();
- xhr.open('get', url, true);
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
- if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304/*页面未修改*/) {
- var script = document.createElement('script');
- script.type = 'text/script';
- script.charset = "utf-8";
- script.text = xhr.responseText;
- eval(xhr.responseText); // 执行代码
- document.body.appendChild(script);
- if (callback && typeof callback === 'function') {
- callback();
- }
- }
- }
- };
- xhr.send(null);
- }
- /*获取异步请求的对象*/
- var createXHR = function () {
- try {
- xhr = new XMLHttpRequest();
- return xhr;
- } catch (e) {
- try {
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- return xhr;
- } catch (ee) {
- xhr = false;
- }
- }
- if (!xhr && typeof XMLHttpRequest != 'undefined') {
- new ActiveXObject("Msxml2.XMLHTTP");
- return xhr;
- }
- };
http://hw1287789687.iteye.com/blog/2243216
0 0
- JS动态加载JS
- js动态加载js
- 动态加载JS
- 动态加载js
- 动态加载js文件
- JS动态加载CSS
- 动态加载js文件
- 动态加载JS文件
- js文件动态加载
- 动态加载JS
- js 动态加载事件
- Js 动态加载jQuery
- 动态加载js文件
- ajax动态加载js
- 动态加载JS文件
- 动态加载js
- 动态加载JS
- 动态加载css js
- 多线程之NSOperation
- 二分查找时间复杂度的计算
- 快速寻找满足条件的两个数
- 高德地图 key获取与Key错误解决方案
- UIStepper - 步进控件
- 动态加载js
- 非常强大的shell写的俄罗斯方块
- HttpClient 4.3.3 cookie rejected的解决办法
- 网络爬虫(网络蜘蛛)之网页抓取
- dubbo 分布式事务
- leetcode 206. Reverse Linked List
- windows下的正则式工具介绍之一:RegexBuddy
- 导入SlidingMenuDemo需要第三方库问题
- 经纬度讲课之ContentProvider的一些整理