`
lorry1113
  • 浏览: 262382 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • js
阅读更多
动态加载JS脚本的4种方法
2006-12-04 15:33

要实现动态加载JS脚本有4种方法:

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>

现在完成了一个JS脚本的动态加载。

var Rash=true;
var msg="";
function norash()
{
if (confirm("确定要取消吗"))
Rash=false;
}
function rashit()
{
setInterval('getrss()',Inttime);
}
function getrss()
{
        if (Rash==true)
        {
        head=document.getElementsByTagName('head').item(0);
        script=document.createElement('script');
        script.src='INCLUDE/AutoUpdate.asp';
        script.type='text/javascript';
        script.defer=true;
        void(head.appendChild(script));
        window.status=msg;
        }
}
rashit();
分享到:
评论

相关推荐

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

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

    vue如何实现动态加载脚本

    今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个...

    vue动态加载js.zip

    Vue动态加载JS是一种实现这一需求的技术,它允许我们在运行时根据需要加载JavaScript文件。本文将深入探讨Vue动态加载JavaScript的原理、方法以及其实现步骤。 首先,我们需要理解Vue动态加载的核心概念。在HTML中...

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

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

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

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

    动态加载外部JS文件

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

    unity动态添加和删除脚本

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

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

    最后,文章中提到的通过按钮点击事件触发动态添加JavaScript脚本的方法,是一种常见的实现动态脚本添加的交互方式。通过为按钮绑定点击事件,并在事件处理函数中执行动态添加脚本的函数,可以使得在用户交互过程中按...

    javascript函数动态加载javascript文件

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和数据管理。在实际项目中,为了提高页面加载速度和优化用户体验,我们常常需要按需加载JavaScript文件,而不是一次性加载所有...

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

    3. 加载并执行Groovy脚本:通过GroovyClassLoader的`parseClass()`方法解析Groovy源码,然后使用`newInstance()`方法创建脚本实例,最后通过`invokeMethod()`方法执行脚本中的方法。 在Java与MongoDB的交互中,我们...

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

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

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

    标题中的知识点是关于JavaScript动态加载脚本的方法。描述中强调了动态加载JavaScript文件的好处,主要是为了提高页面加载效率,避免加载不必要的脚本资源。此外,还指出了单个大文件适合动态加载的情况,以及小文件...

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

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

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

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

    JavaScript脚本精华-JS脚本精华

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责客户端的动态交互。作为网页和浏览器之间的桥梁,它使得网页可以实现丰富的用户体验和动态功能。本压缩包"JavaScript脚本精华"汇集了大量JS...

    Ant构建中使用JS脚本方法

    在Ant构建过程中,JavaScript脚本方法的使用是一个强大的工具,它允许开发者自定义构建过程,实现更复杂的逻辑和任务自动化。Ant是一个Java库和命令行工具,它的设计目标是驱动软件构建过程,尤其是在Java项目中。这...

    加载JavaScript脚本的包

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

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

    本文将详细介绍两种常见的动态加载JavaScript文件的方法,并讨论它们的安全性。 ### 方法一:使用Ajax加载 通过Ajax请求加载JavaScript文件,实质上是向服务器发送异步请求获取脚本内容,然后使用`eval()`函数执行...

Global site tag (gtag.js) - Google Analytics