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;
}
};
相关推荐
动态加载JavaScript文件的基本原理是利用`<script>`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面我们将深入探讨这两种方法： 1. **使用`<script>`标签**： 在HTML中，...
### Vue动态加载外部JS代码实现 #### 概述 在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。...
总结来说，动态创建iframe并动态添加js执行代码是Web开发中的重要技术，它能够帮助我们实现异步加载、跨域通信等功能，但同时也需要注意相关的安全问题。通过熟练掌握这些技术，开发者能够构建更复杂、更灵活的Web...
动态加载外部JS文件是网页开发中的一个重要技术，它允许网页在需要时按需加载JavaScript资源，从而提高页面的加载速度，优化用户体验，并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...
在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...
ASP.NET动态加载JavaScript树是一种常见的前端交互技术，用于在网页中构建可扩展的、动态的树形结构。这种技术结合了后端ASP.NET的强大处理能力和前端JavaScript的灵活展示，为用户提供了良好的交互体验，尤其适用于...
动态加载JS（Dynamic JavaScript Loading）是现代Web开发中的一个重要技术，它可以提高页面的加载速度，减少初始加载的数据量，并在需要时按需加载资源，从而优化用户体验。 在ExtJS 3中，虽然没有像ExtJS 4那样...
可以通过extjs3进行动态加载js,也可以直接通过原生js进行调用 拥有extjs4的动态加载功能， 可以同时加载多个js文件， 同时加载过的文件不会重复加载
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本...
动态加载js文件,让js文件实现用不到绝不加载的功能!
`Ext.Loader` 是 Ext4 中的一个核心特性，用于动态加载所需的 JavaScript 类库和模块，这在开发大型应用时尤其有用，因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载，即只有在实际需要...
【JavaScript】vue动态加载JavaScript 高级JavaScript组件 【实例简介】vue动态加载JavaScript 【JavaScript】vue动态加载JavaScript 高级JavaScript组件
动态加载JS文件和CSS文件，多浏览器支持。多个JS文件同时加载，加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);
4. **动态添加JS链接** 5. **注意事项** ### 1. 理解动态加载的概念 动态加载指的是在页面加载过程中根据特定条件来决定是否加载某些资源（如CSS或JS文件）。这种方式可以显著提升用户体验，尤其是在网络条件不佳...
JavaScript动态加载资源文件是指在页面加载完成后，根据需要从服务器动态加载额外的脚本（js文件）或样式表（css文件）。这种方法可以减少初始页面加载时的资源消耗，提高页面的加载速度。动态加载可以通过两种方式...
动态加载JavaScript文件是一种在网页运行时，根据需要将JavaScript文件加载到页面中的技术。这种方法通常用于页面初始化时不需要执行的脚本，或者根据用户操作来决定加载哪些脚本，以此减少页面的初始加载时间，提高...
动态加载JavaScript文件是提高网页性能和优化用户体验的重要技术。它允许网页在需要时按需加载脚本，避免一次性加载大量资源导致页面加载速度减慢。本文将详细介绍两种常见的动态加载JavaScript文件的方法，并讨论...
### 动态加载JS文件的三种方法 在Web开发中，动态加载JavaScript文件是一种常见的需求。这不仅可以提高页面性能，还能让开发者灵活地控制脚本的加载时机。本文将详细介绍三种常用的动态加载JS文件的方法，并通过...