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;
}
};
相关推荐
### Vue动态加载外部JS代码实现 #### 概述 在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。...
在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...
本篇文章将深入探讨如何使用jQuery实现动态加载JavaScript插件，这是一个在网页开发中非常实用的技术，尤其是在优化页面性能和减少初始加载时间方面。 首先，理解动态加载的基本原理。在传统的网页开发中，所有的...
ASP.NET动态加载JavaScript树是一种常见的前端交互技术，用于在网页中构建可扩展的、动态的树形结构。这种技术结合了后端ASP.NET的强大处理能力和前端JavaScript的灵活展示，为用户提供了良好的交互体验，尤其适用于...
可以通过extjs3进行动态加载js,也可以直接通过原生js进行调用 拥有extjs4的动态加载功能， 可以同时加载多个js文件， 同时加载过的文件不会重复加载
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本...
`Ext.Loader` 是 Ext4 中的一个核心特性，用于动态加载所需的 JavaScript 类库和模块，这在开发大型应用时尤其有用，因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载，即只有在实际需要...
动态加载JS文件和CSS文件，多浏览器支持。多个JS文件同时加载，加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);
4. **动态添加JS链接** 5. **注意事项** ### 1. 理解动态加载的概念 动态加载指的是在页面加载过程中根据特定条件来决定是否加载某些资源（如CSS或JS文件）。这种方式可以显著提升用户体验，尤其是在网络条件不佳...
动态添加js,动态添加表格和删除表格,批量添加记录，批量添加
JavaScript动态加载资源文件是指在页面加载完成后，根据需要从服务器动态加载额外的脚本（js文件）或样式表（css文件）。这种方法可以减少初始页面加载时的资源消耗，提高页面的加载速度。动态加载可以通过两种方式...
动态加载JavaScript文件是一种在网页运行时，根据需要将JavaScript文件加载到页面中的技术。这种方法通常用于页面初始化时不需要执行的脚本，或者根据用户操作来决定加载哪些脚本，以此减少页面的初始加载时间，提高...
动态加载JavaScript文件是提高网页性能和优化用户体验的重要技术。它允许网页在需要时按需加载脚本，避免一次性加载大量资源导致页面加载速度减慢。本文将详细介绍两种常见的动态加载JavaScript文件的方法，并讨论...
### 动态加载JS文件的三种方法 在Web开发中，动态加载JavaScript文件是一种常见的需求。这不仅可以提高页面性能，还能让开发者灵活地控制脚本的加载时机。本文将详细介绍三种常用的动态加载JS文件的方法，并通过...
（1）使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数，防止缓存*/ ...
javascript、css动态加载工具
此外，还可以通过JavaScript动态创建`<style>`元素，并使用`insertRule`方法向`document.styleSheets`中添加样式规则。示例代码如下： ```javascript if (flag) { loadCss("css/base.css"); }; function loadCss...
动态加载是 jsTree 的核心特性之一，它允许在用户滚动或展开树节点时按需加载数据，而不是一次性加载所有数据。这种机制对于处理大量数据特别有用，因为它减少了初始页面加载时间，提高了用户体验。通过设置适当的...