`
huanyq2008
  • 浏览: 171731 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

动态加载javascript文件

阅读更多

动态加载javascript?很俗的一个题目,如果你已经知道如何动态加载外部javascript,那么你可以跳过这篇文章继续阅读其它的。如果你还不知道怎样动态加载外部javascript文件的话,请耐心的继续阅读。
什么时候会用到动态加载javascript文件的技术呢?其实很多的时候都有可以用到,比如从服务器端生成javascript脚本,但是用到动态加载javascript文件主要是因为前端和后端数据的交互(至少哥会在这个时候用到)。
前几天在修改移动版支付宝时,就使用了动态加载javascript文件。
记住,这里说的动态加载js文件是指利用js动态加载js文件,并非是服务器生成。

如何创建动态加载外部javascript的脚本呢?非常简单

 var script = document.createElement('script');//创建script标签  
 script.src = 'http://mgw.alipay.com/choosePhone.htm?' + (new Date()).getTime().toString().substring(0,8);  
 script.type = "text/javascript";  
 script.characterSet = 'utf-8';  
 script.onload = script.onreadystatechange = function(){//兼容IE和DOM标签的script onload事件  
     if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {  
        alert(malipayBrands.length);  
     }  
 } 

 

请注意以上代码中的script.onload = script.onreadystatechange = function (){},其中onload用于DOM标签的浏览器,onreadystatechange用于IE。

最后在head中插入我们的script

document.getElementsByTagName('head')[0].appendChild(script);

 

 

在国外已经有一个封装好的loadScript.js,代码如下:

 
function loadScript(url, callback){  
         var f = arguments.callee;  
         if (!("queue" in f))  
             f.queue = {};  
         var queue = f.queue;  
         if (url in queue) { // script is already in the document  
             if (callback) {  
                 if (queue[url]) // still loading  
                     queue[url].push(callback);  
                 else // loaded  
                      callback();  
             }  
             return;  
         }  
         queue[url] = callback ? [callback] : [];  
         var script = document.createElement("script");  
         script.type = "text/javascript";  
         script.onload = script.onreadystatechange = function(){  
             if (script.readyState && script.readyState != "loaded" && script.readyState != "complete")  
                 return;  
             script.onreadystatechange = script.onload = null;  
             while (queue[url].length)  
                 queue[url].shift()();  
             queue[url] = null;  
         };  
         script.src = url;  
         document.getElementsByTagName("head")[0].appendChild(script);  
} 
 
分享到:
评论

相关推荐

    javascript函数动态加载javascript文件

    这正是"javascript函数动态加载javascript文件"这一主题的核心所在。 动态加载JavaScript文件的基本原理是利用`<script>`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面...

    动态加载JavaScript文件的两种方法_.docx

    动态加载JavaScript文件是提高网页性能和优化...总结,动态加载JavaScript文件可以提升网页性能,但需谨慎处理,特别是在涉及用户安全的数据操作时。合理使用这两种方法,结合安全策略,可以在性能与安全之间找到平衡。

    基于Ajax的动态JavaScript文件加载模型.pdf

    基于Ajax的动态JavaScript文件加载模型 Ajax异步请求 JavaScript文件加载模型是基于B/S模式的系统中的一个重要组件。在浏览器端,JavaScript文件是浏览器端程序的主要组成部分。传统的方式是将所有可能用到的...

    动态加载外部JS文件

    动态加载则改变了这一模式,它使用JavaScript代码来异步请求并插入外部脚本,使得页面可以先呈现基本内容,而JavaScript文件则在后台加载,提高了用户体验。 二、动态加载的方法 1. 使用`<script>`标签的`async`和...

    动态加载JavaScript文件的两种方法

    需要注意的是,动态加载的JavaScript文件的执行顺序依赖于它们被添加到DOM中的顺序,因此在多个脚本的加载和执行管理上需要特别注意。另外,如果JavaScript文件较大或者网络状况不佳,可能会延长页面加载时间,影响...

    如何动态加载外部Javascript文件

    动态加载外部JavaScript文件是一种常用的技术手段,它允许在不重新加载整个页面的情况下,动态地将JavaScript文件添加到网页中。这对于提高页面加载速度、按需加载资源、减少初始加载时间等方面非常有效。 在介绍...

    动态加载JavaScript文件的3种方式

    动态加载JavaScript文件是前端开发中常用的技术之一,它允许我们在页面加载完成后根据需要再加载特定的JS文件,从而优化页面的加载时间和性能。本文将详细介绍三种动态加载JavaScript文件的方法:使用document.write...

    vue动态加载js.zip

    因此,需要在运行时动态地将新的JavaScript文件添加到DOM中,以实现按需加载。 实现Vue动态加载JavaScript的基本步骤如下: 1. 创建Script元素:在JavaScript中,我们可以使用`document.createElement('script')`...

    javascript动态加载实现方法一.docx

    JavaScript 动态加载是一种优化网页性能和管理大量脚本的方法,它允许我们在需要时才加载特定的 JavaScript 文件,而不是一次性在页面加载时全部加载。这有助于减少初始页面加载时间,提高用户体验,特别是在处理...

    使用javaScript动态加载Js文件和Css文件

    最后,将这个script元素添加到document.head中,从而实现动态加载JavaScript文件。 对于CSS文件的动态加载,操作则略有不同。需要创建一个link元素,并设置其rel属性为"stylesheet",type属性为"text/css",media...

    Javascript-Dynamic-Loading-and-Version-Control:通过自动版本管理动态加载依赖JavaScript文件

    通过版本控制动态加载Javascript文件和功能 该库将根据列出的依赖关系动态加载javascript文件(和函数),css和图像,同时还生成用于浏览器缓存版本控制的唯一文件名。 概述 Javascript代码通常取决于现有类,函数和...

    理解Javascript文件动态加载

    动态加载JavaScript文件时,常见的一种做法是使用JavaScript创建一个`<script>`标签,并将文件的URL赋给该标签的`src`属性,然后将这个标签动态地添加到HTML文档的`<head>`部分或者`<body>`部分。例如: ```...

    javascript控件开发之动态加载

    JavaScript控件开发是一种常见的Web应用开发技术,它...在"script"和"web"这些文件中,可能包含了实现上述功能的示例代码或文档,深入学习和研究这些文件,将有助于你更好地理解和实践JavaScript控件的动态加载技术。

    js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用[removed]标签。 就像下面这样: [removed][removed] [removed]标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。 (1)严格的读取顺序。由于...

    vue动态加载外部依赖js代码实现

    在前端开发中,有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时,可能会遇到需要按需加载某些功能的情况,例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...

    jQuery实现动态加载(按需加载)javascript文件的方法分析

    以下是一个简单的示例,展示了如何使用jQuery动态加载JavaScript文件: ```html <script type="text/javascript" src="jquery-1.7.2.min.js"> 利用 jQuery 动态加载 js <div id="content"></div> ...

    javascript中动态加载js文件多种解决办法总结

    在开发过程中,有时我们可能需要在运行时动态加载JavaScript文件,以提高页面性能或根据用户需求加载特定的脚本。本文将详细介绍几种在JavaScript中动态加载JS文件的方法。 1. **利用`document.write`** 这是最...

Global site tag (gtag.js) - Google Analytics