要实现动态加载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脚本的动态加载。
分享到：
相关推荐
在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...
今天在研究，tinymce富文本编辑器怎样在vue中使用，然后看到其它框架上的使用方法，它是动态加载tinymce脚本的，若果在本地引入静态文件或者，npm安装都会导致vue项目打包体积过大，这种动态脚本引入方式，是一个...
Vue动态加载JS是一种实现这一需求的技术，它允许我们在运行时根据需要加载JavaScript文件。本文将深入探讨Vue动态加载JavaScript的原理、方法以及其实现步骤。 首先，我们需要理解Vue动态加载的核心概念。在HTML中...
在实际应用中，C#通过调用Noesis.Javascript库的API，可以轻松地执行JavaScript脚本，如下所示： ```csharp using Noesis.Javascript; // 创建JavaScript引擎实例 var engine = new JavascriptEngine(); // 注册...
"js动态引入外部js脚本并获取里面的变量值"这个主题就是关于如何在JavaScript中实现这种功能的讨论。 首先，`jQuery`库提供了一个非常方便的方法来实现动态加载外部脚本：`$.getScript()`。这是一个异步方法，它...
动态加载外部JS文件是网页开发中的一个重要技术，它允许网页在需要时按需加载JavaScript资源，从而提高页面的加载速度，优化用户体验，并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...
给定的部分内容中的代码展示了如何使用JavaScript（实际上是在Unity中使用的旧式JavaScript语法）动态添加脚本组件。这段代码首先定义了一个`GameObject`类型的变量`obj`和一个`GUISkin`类型的变量`myskin`，然后在`...
最后，文章中提到的通过按钮点击事件触发动态添加JavaScript脚本的方法，是一种常见的实现动态脚本添加的交互方式。通过为按钮绑定点击事件，并在事件处理函数中执行动态添加脚本的函数，可以使得在用户交互过程中按...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和数据管理。在实际项目中，为了提高页面加载速度和优化用户体验，我们常常需要按需加载JavaScript文件，而不是一次性加载所有...
3. 加载并执行Groovy脚本：通过GroovyClassLoader的`parseClass()`方法解析Groovy源码，然后使用`newInstance()`方法创建脚本实例，最后通过`invokeMethod()`方法执行脚本中的方法。 在Java与MongoDB的交互中，我们...
在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...
网页JS脚本注入，突破网页本地脚本验证方法实例 JS脚本注入是一种常见的网页攻击手法，通过注入恶意脚本来控制网页的行为。在这个实例中，我们将展示如何使用JS脚本注入来突破网页本地脚本验证方法，跳过验证码，并...
标题中的知识点是关于JavaScript动态加载脚本的方法。描述中强调了动态加载JavaScript文件的好处，主要是为了提高页面加载效率，避免加载不必要的脚本资源。此外，还指出了单个大文件适合动态加载的情况，以及小文件...
总结来说，动态插入JavaScript脚本代码的关键在于确保脚本加载和执行的正确时机。通过合理使用`defer`属性、`onload`事件、`readyState`检查和`window.setTimeout`，我们可以确保脚本加载完成后，再执行相关的函数，...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级编程语言，主要负责客户端的动态交互。作为网页和浏览器之间的桥梁，它使得网页可以实现丰富的用户体验和动态功能。本压缩包"JavaScript脚本精华"汇集了大量JS...
在Ant构建过程中，JavaScript脚本方法的使用是一个强大的工具，它允许开发者自定义构建过程，实现更复杂的逻辑和任务自动化。Ant是一个Java库和命令行工具，它的设计目标是驱动软件构建过程，尤其是在Java项目中。这...
这就是`js jar jwr`标签所指的场景，它涉及到Java运行时环境中如何加载和执行JavaScript脚本。 1. **Nashorn JavaScript引擎**： 在Java 8之前，Java提供了Nashorn JavaScript引擎，这是一个内置的JavaScript解释...
本文将详细介绍两种常见的动态加载JavaScript文件的方法，并讨论它们的安全性。 ### 方法一：使用Ajax加载 通过Ajax请求加载JavaScript文件，实质上是向服务器发送异步请求获取脚本内容，然后使用`eval()`函数执行...