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动态加载JS是一种实现这一需求的技术，它允许我们在运行时根据需要...
动态加载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...
本篇文章将深入探讨如何使用jQuery实现动态加载JavaScript插件，这是一个在网页开发中非常实用的技术，尤其是在优化页面性能和减少初始加载时间方面。 首先，理解动态加载的基本原理。在传统的网页开发中，所有的...
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 类库和模块，这在开发大型应用时尤其有用，因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载，即只有在实际需要...
动态加载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文件加载到页面中的技术。这种方法通常用于页面初始化时不需要执行的脚本，或者根据用户操作来决定加载哪些脚本，以此减少页面的初始加载时间，提高...