`
xsailer
  • 浏览: 5359 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

如何动态加载JS脚本

阅读更多

用ajax开发网站,用ajax的时候,需要用到大量的JS代码,而并是所有的代码都是要第一个载入的页面要用到,

所以很多的JS代码动态载入比较合适,下面介绍了四种方法,在ajax开发中,第一种方法不合适,2,3,4方法,

本质上是一张方法,详细地的动态加载JS方法如下: 1、直接document.write

<script language="javascript">      document.write("<script src='test.js'><\/script>"); </script>

 

2、动态改变已有script的src属性

<script src='' id="s1"></script> <script language="javascript">      s1.src="test.js" </script>

 

3、动态创建script元素

<script>     var oHead = document.getElementsByTagName('HEAD').item(0);     var oScript= document.createElement("script");      oScript.type = "text/javascript";      oScript.src="test.js";      oHead.appendChild( oScript); </script>

 

  这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。

要动态加载的JS脚本:a.js,以下是该文件的内容。

var str = "中国"; alert( "这是a.js中的变量:" + str );

 

主页面代码:

<script language="JavaScript"> function LoadJS( id, fileUrl ) {    var scriptTag = document.getElementById( id );     var oHead = document.getElementsByTagName('HEAD').item(0);    var oScript= document.createElement("script");    if ( scriptTag   ) oHead.removeChild( scriptTag   );      oScript.id = id;     oScript.type = "text/javascript";      oScript.src=fileUrl ;     oHead.appendChild( oScript); } LoadJS( "a.js" ); alert( "主页面动态加载a.js并取其中的变量:" + str ); </script>

上述代码执行后 a.js 的 alert 执行并弹出消息, 但是 主页面产生了错误,没有弹出对话框。原因是 'str' 未定义,为什么呢?因为主页面在取 str 的

时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候,可以用下面的第四种方法。

4、原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象。 注意:a.js必须用UTF8编码保存,要不会出错。因为服务器与XML使用UTF8编码传送数据。 主页面代码:

<script language="JavaScript"> function GetHttpRequest() {     if ( window.XMLHttpRequest ) // Gecko         return new XMLHttpRequest() ;     else if ( window.ActiveXObject ) // IE         return new ActiveXObject("MsXml2.XmlHttp") ; } function AjaxPage(sId, url){     var oXmlHttp = GetHttpRequest() ;     oXmlHttp.OnReadyStateChange = function()        {         if ( oXmlHttp.readyState == 4 )         {             if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )             {                 IncludeJS( sId, url, oXmlHttp.responseText );             }             else              {                  alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;              }         }     }     oXmlHttp.open('GET', url, true);     oXmlHttp.send(null); } function IncludeJS(sId, fileUrl, source) {     if ( ( source != null ) && ( !document.getElementById( sId ) ) ){         var oHead = document.getElementsByTagName('HEAD').item(0);         var oScript = document.createElement( "script" );         oScript.language = "javascript";         oScript.type = "text/javascript";         oScript.id = sId;         oScript.defer = true;         oScript.text = source;         oHead.appendChild( oScript );     } } AjaxPage( "scrA", "b.js" ); alert( "主页面动态加载JS脚本。"); alert( "主页面动态加载a.js并取其中的变量:" + str ); </script>

 

用ajax同步加载JS代码,加载一个还好,两三个或者更多的时候,还是用异步加载比较快。

我使用第三种方法,每个JS我都为其命名,当某个JS加载完成后,则置一个代表其已经加载完成的标志。

Js代码:

  1. //所有的JS文件   
  2. var jsM = {   
  3.      page          : false   ,   
  4.      dhtmlXTree   : false ,   
  5.      photo_tree   : false   
  6.     };   
  7. function getJSM(f)   
  8. {   
  9.     var reg = /\/(\w+)\./;   
  10.      jF = f.match(reg);   
  11.     return jF[jF.length-1];   
  12. }   
  13.   
  14. function loadJS(js)   
  15. {   
  16. id = getJSM(js);   
  17. var scriptId = document.getElementById(id);   
  18. var head = document.getElementsByTagName('head').item(0);   
  19. if(scriptId)   
  20. {   
  21.   //head.removeChild(id);   
  22. }   
  23. else  
  24. {   
  25.    script   = document.createElement('script');   
  26.    script.src = js;   
  27.    script.type = 'text/javascript';   
  28.    script.id = id;   
  29.    head.appendChild(script);   
  30. }   
  31. }   
  32. //JS时候,判断jsM中,代表其模块的标识是否为true,如果为false,则尚未加载   
  33. loadJS("page.js")   
分享到:
评论

相关推荐

    动态加载JS脚本的4种方法.doc

    在Web开发中,动态加载JavaScript脚本是一种常见的优化策略,它允许在页面加载后根据需要按需加载脚本,从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法,并探讨它们的工作原理和应用场景。 1...

    vue如何实现动态加载脚本

    这篇文章主要介绍了vue如何...下面上的代码块叫 dynamicLoadScript 顾名思义,动态加载脚本,这个js只对加载tinymce有效,不过要想加载其它脚本,稍微做一下改动即可 我们可以建立一个dynamicLoadScript.js文件 上代码

    C# 动态解析 javascript 脚本引擎源码

    在实际应用中,C#通过调用Noesis.Javascript库的API,可以轻松地执行JavaScript脚本,如下所示: ```csharp using Noesis.Javascript; // 创建JavaScript引擎实例 var engine = new JavascriptEngine(); // 注册...

    vue动态加载js.zip

    在Vue.js应用开发中,有时候我们可能需要动态加载JavaScript资源,比如某些库或者插件只在特定场景下使用,为了优化性能,不希望一开始就加载。Vue动态加载JS是一种实现这一需求的技术,它允许我们在运行时根据需要...

    js动态引入外部js脚本并获取里面的变量值.pdf

    "js动态引入外部js脚本并获取里面的变量值"这个主题就是关于如何在JavaScript中实现这种功能的讨论。 首先,`jQuery`库提供了一个非常方便的方法来实现动态加载外部脚本:`$.getScript()`。这是一个异步方法,它...

    动态加载外部JS文件

    动态加载外部JS文件是网页开发中的一个重要技术,它允许网页在需要时按需加载JavaScript资源,从而提高页面的加载速度,优化用户体验,并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...

    unity动态添加和删除脚本

    给定的部分内容中的代码展示了如何使用JavaScript(实际上是在Unity中使用的旧式JavaScript语法)动态添加脚本组件。这段代码首先定义了一个`GameObject`类型的变量`obj`和一个`GUISkin`类型的变量`myskin`,然后在`...

    javascript函数动态加载javascript文件

    动态加载JavaScript文件的基本原理是利用`&lt;script&gt;`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面我们将深入探讨这两种方法: 1. **使用`&lt;script&gt;`标签**: 在HTML中,...

    Firebug控制台动态加载jquery脚本并执行jquery代码

    在`firebug动态加载js脚本.txt`文件中,可能包含了一些关于如何在Firebug控制台中执行这些操作的步骤和代码片段。 6. **扩展应用**:除了在Firebug控制台中使用,这种动态加载和执行jQuery的方法还可以应用于实际的...

    javascript 动态脚本添加的简单方法

    JavaScript动态脚本添加指的是在页面加载完成后,根据需要动态地向HTML文档中添加JavaScript脚本,这种技术通常用来异步加载JavaScript资源以优化页面性能,避免阻塞页面加载过程。具体的知识点包括动态创建script...

    网页js脚本注入,可执行任意代码。

    网页JS脚本注入,突破网页本地脚本验证方法实例 JS脚本注入是一种常见的网页攻击手法,通过注入恶意脚本来控制网页的行为。在这个实例中,我们将展示如何使用JS脚本注入来突破网页本地脚本验证方法,跳过验证码,并...

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

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

    Java调用Groovy,实时动态加载数据库groovy脚本

    2. 创建GroovyClassLoader:使用这个类加载器可以动态加载和执行Groovy脚本。它继承自Java的ClassLoader,能解析Groovy源码并生成字节码。 3. 加载并执行Groovy脚本:通过GroovyClassLoader的`parseClass()`方法...

    QT中使用QScriptEngine引擎编译运行JavaScript脚本

    有了QScriptEngine,就可以加载并执行JavaScript脚本了。可以通过`QScriptEngine::evaluate()`函数来完成这个任务。例如,如果有一个名为`script.js`的JavaScript文件,可以这样运行: ```cpp QString scriptFile =...

    JavaScript脚本精华-JS脚本精华

    本压缩包"JavaScript脚本精华"汇集了大量JS脚本源代码,是学习和提升JavaScript技能的重要资源。 1. **基础语法**:JS的基础包括变量、数据类型(如字符串、数字、布尔值、对象、数组、null和undefined)、运算符、...

    如何让动态插入的javascript脚本代码跑起来

    总结来说,动态插入JavaScript脚本代码的关键在于确保脚本加载和执行的正确时机。通过合理使用`defer`属性、`onload`事件、`readyState`检查和`window.setTimeout`,我们可以确保脚本加载完成后,再执行相关的函数,...

    JS动态加载库

    JavaScript动态加载库是一种技术,它允许开发者在网页运行时按需加载JavaScript文件,而不是一次性在页面加载时加载所有脚本。这种技术对于优化网页性能、减小初始加载时间以及实现模块化开发非常重要。下面将详细...

    加载JavaScript脚本的包

    这就是`js jar jwr`标签所指的场景,它涉及到Java运行时环境中如何加载和执行JavaScript脚本。 1. **Nashorn JavaScript引擎**: 在Java 8之前,Java提供了Nashorn JavaScript引擎,这是一个内置的JavaScript解释...

    how-to-load-dynamic-script, 加载动态脚本的正确方法.zip

    在现代Web开发中,动态加载JavaScript脚本是提高页面性能和优化用户体验的重要手段。动态加载允许我们按需引入脚本,避免一次性加载大量资源导致页面加载速度变慢。本教程将详细讲解如何正确地在HTML中加载动态脚本...

Global site tag (gtag.js) - Google Analytics