动态插入JavaScript脚本的正确执行方式

需积分: 20 143 浏览量更新于2024-09-13 收藏 32KB DOC 举报

"本文主要探讨如何在网页中动态插入JavaScript脚本并确保其正确执行，主要涉及两种常见方法。" 在网页开发中，有时我们需要在页面加载后或用户触发特定事件时动态插入JavaScript脚本。这通常用于延迟加载、按需加载或者避免阻塞页面渲染。以下是两种常见的实现方式： ### 1. 直接插入`src`属性这种方法是最直观的，通过创建一个新的`<script>`元素，并为其设置`src`属性指向要加载的JavaScript文件。例如： ```html <script> var x = document.createElement("SCRIPT"); x.src = "a.js"; x.defer = true; // 设置defer属性，使脚本在文档解析完成后但在DOMContentLoaded事件之前执行 document.getElementsByTagName("HEAD")[0].appendChild(x); foo(); // 如果脚本中的函数在这里调用，可能会因脚本未加载完成而出错 </script> ``` 然而，如描述中所述，直接在`head`标签内这样使用可能会导致错误，因为`foo()`可能在`a.js`加载完成之前就被调用了。这是因为`script`元素的`defer`属性仅在`<script>`位于`<head>`标签内且`src`存在时起作用，它会延迟脚本的执行直到整个文档解析完成。 ### 2. 使用`onload`或`onreadystatechange`监听脚本加载状态为了避免上述问题，可以添加事件监听器来判断脚本是否已加载完成。当脚本加载完成后执行相关函数： ```html <script> function bar(u) { var x = document.createElement("SCRIPT"); x.src = u; x.onload = function() { foo(); // 脚本加载完成后再调用函数 }; document.getElementsByTagName("HEAD")[0].appendChild(x); } bar("a.js"); </script> ``` 在这个例子中，我们使用`onload`事件来监听脚本加载完成。当`a.js`加载并执行完毕后，`foo()`函数才会被调用，从而避免了错误。在某些情况下，也可以使用`onreadystatechange`事件来监控脚本的`readyState`属性变化，当状态变为`"complete"`时，表示脚本已经执行完毕： ```javascript x.onreadystatechange = function() { if (this.readyState === "loaded" || this.readyState === "complete") { foo(); } }; ``` ### 脚本加载顺序与执行时机 - `async`属性：如果设置了`async`属性，脚本将异步加载，不会阻塞页面解析，但执行顺序不确定。 - `defer`属性：在`<head>`中使用`defer`属性，脚本会在文档解析完成后，DOMContentLoaded事件触发前执行，保证了执行顺序。 - `onload`/`onreadystatechange`：使用事件监听脚本加载，确保脚本加载完成后再执行相关代码，能精确控制执行时机。总结，动态插入JavaScript脚本时，应考虑脚本的加载顺序和执行时机，合理利用`defer`、`async`属性以及事件监听，以确保代码的正确执行。在处理动态脚本时，理解`readyState`的各个状态及其含义也至关重要，这有助于调试和优化页面性能。

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

首先，声明方法很多种，直接间接的方法都有，只罗列一般情况下的两种模式：

假设我们要装入的代码是 a.js：

var foo=function(){

document.write("I am a.js content foo() function");

};

一。直接插入 src，这种方法简单而直接，但有局限性，

1）

var x=document.createElement("SCRIPT");

x.src="a.js"; x.defer=true;

document.getElementsByTagName("HEAD")[0].appendChild(x);

foo();

</script>

在如上的代码放上 head 标签内，执行时大多数情况下是会出错，信息为：错误:缺少对象

这是由于动态创建对象 script 时，则于 a.js 还没有完全载入而导致的。执行下面的代码，

你就可以发现原因了。

<html>

<head>

<title>never-online dynamic code test page</title>

</head>

<body>

<pre>

readyState 的含义

9- uninitialized : 脚本对象刚被创建，脚本代码未载入；

9- loading : 脚本代码载入中；

9- loaded : 脚本代码完成读入，但尚未开始解释执行；

9- interactive : 解释执行过程中；

9- complete : 脚本已经执行完成。

</pre>

window.onerror=function(msg,url,line)...{

9 document.getElementById("viewer").innerHTML+='<p style="color:red">错

误:'+msg+'line:'+line+'</p>';

9 return true;

}

function bar(u) ...{

9 var x=document.createElement("SCRIPT");

9 x.src=u;

9 x.defer=true;

下载后可阅读完整内容，剩余3页未读，立即下载

堂-吉安

粉丝: 0
资源: 1

动态插入JavaScript脚本的正确执行方式

HTML文档中的JavaScript脚本插入与执行

JavaScript脚本开发：全面介绍及实践方法

JavaScript动态创建DOM与动态脚本加载解析

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

让插入到 innerHTML 中的 script 跑起来的代码第1/2页

JavaScript-Assessment-

php语言盲盒源码。完全可以跑起来，只可用于学习。不支持商用，内有安装说明

wp-ontology:WordPress插件可创建描述微数据中本体语义代码的简码

Electiva-profesional-3:用html制作的基本网页

ASP实例开发源码-六跑战歌程序 5.0.zip

最新资源