JavaScript代码嵌入HTML的方法、及两者的在执行流程上的细微区别
myzbx 2025-01-12 16:51 24 浏览
为了执行Javascript,需要在HTML文件内以特定的方式书写JavaScript的代码,JavaScript的书写方法有多种,其执行的流程也各不相同:
1 <script>标签嵌入
此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造,因此在<script>标签内就无法取得位于其后的DOM元素。
2 读取外部JavaScript文件
此种嵌入方法可以指定defer、async属性。defer可以推迟执行,async可以异步执行。
3 onload嵌入
此种嵌入方法在页面读取完后再对其执行,所以可以对所有的DOM元素操作。
<body onload="alert('hello')">
window.onload = function(){alert('hello');};
当window.onload事件触发时,页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。
//window.onload不能同时编写多个。
//以下代码无法正确执行,结果只输出第二个。
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
});
window.onload和body中onload也有些许区别:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}</script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>
在IE10和FireFox下,结果为 :
"DOMContentLoaded"
"bodyonload"
说明body中的onload会覆盖window.onload
在chrome下,结果为:
DOMContentLoaded
window.onload
bodyonload
然后,如果把javascript代码移到最下面,结果又会是什么样呢?
chrome和IE10、FireFox的结果竟然是一样的:
DOMContentLoaded
window.onload
IE 10、Fire Fox可以理解,window.on load和body中的 on load 谁在下面就是谁覆盖谁,只会执行后面的那个。
4 DOM ContentLoaded嵌入
onload方法可能需要等待时间,而本方法可以在完成HTML解析后发生的事件,减少等待时间。
在chrome、IE10和FireFox中,执行结果是:DOMContentLoaded然后才是onload的输出。所以说一般情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log(document.getElementById("div1"));}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>
如果你是个jQuery使用者,你可能会经常使用$(document).ready();或者$(function(){}),这都是使用了DOMContentLoaded事件
5 动态载入JavaScript文件
5.1 使用原生js方法
动态创建script标签,并指定script的src属性
function loadJs(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (typeof(callback) != "undefined") {
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
}
script.src = url;
document.body.appendChild(script);
}
loadJs("test.js", function() {
alert('done');
});
还可以使用同样的原理动态加载css文件,只不过插入的的父节点是head标签。
5.2 使用document.write/writeln()方式
该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的转义。
5.3 使用jQuery
使用getScript(url,callback)方法实现动态加载js文件
$.getScript('test.js',function(){
alert('done');
});
-End-
相关推荐
- 首次被击毁!低调但先进的S-350,为何活得比韩国仿版差这么多?
-
【军武次位面】作者:乐乐2月18日,乌克兰军方网站发布了其前线炮兵侦察旅,在顿涅茨克地区攻击俄军S-350防空系统的现场视频。这也是这款地位独特的先进防空系统,第一次确认在战场上被摧毁——考虑到近三年...
- Windows 10 LTSC 2021 vs 2019:哪个更适合你?
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:闪电神龙微软近日发布了2024年11月份ISO镜像,包括Windows1124H2、Windows1022H2以及Server2025...
- 叛变投敌?俄军最先进隐身无人机S-70,在乌东上空被苏-57击落!
-
【军武次位面】作者:天狼2024年10月5日,乌克兰东部战区传来一条令人震惊的消息:一架俄罗斯最先进的隐身无人机S-70“猎人-B”在乌东上空被击落,令人意外的是,击落它的竟然是俄罗斯自己的战斗机。这...
- 自动驾驶车祸致1死1伤!特斯拉被判赔偿2.43亿美元
-
当地时间8月1日,美国佛罗里达州一个陪审团裁定,美国电动汽车制造商特斯拉应为2019年一辆配备自动驾驶系统的ModelS所致的致命车祸承担部分责任,并判令该公司向一名遇难女性的家属及一名伤者支付约2...
- HP488DZ 无绳电锤钻(18V)牧田DTD156SFJ
-
HP488DZ无绳电锤钻(18V)牧田DTD156SFJHP488DZ无绳电锤钻(18V)HP488DZ特征HP488D是一款基于HP457D开发的无绳电锤,采用18V锂离子电池供电。其...
- FJK-SJRFPZS防爆阀位行程开关级
-
解答常见误区在工业自动化和安全控制领域,FJK-SJRFPZS防爆阀位行程开关等级是一个关乎设备安全与运行效率的重要参数。许多用户在选择和应用这类开关时,可能对其等级分类存在一些误解。本文将通过通俗易...
- China's PLA aerobatic team to perform in Thailand for 50th anniversary of bilateral diplomatic ties
-
TIANJIN,March2(Xinhua)--TheBayiAerobaticTeamoftheChinesePeople'sLiberationArmy(PLA)A...
- JD.com Enters Travel and Hospitality With Supply Chain-Focused Strategy
-
TMTPOST--JD.comhasofficiallythrownitshatintoChina’sfiercelycompetitivetravelandhospita...
- JD.com Drives Robotics Funding Frenzy With Investments in LimX Dynamics, Spirit AI, and EngineAI
-
TMTPOST--JD.comisdoublingdownonembodiedintelligence,catalyzinganewwaveoffundinginChi...
- JD.com opens first JD Mall in Beijing, steps up offline retail push
-
bySongJiananJD.comhaslauncheditsfirstJDMALLinBeijing,expandingitsofflineretailfootpr...
- JD.com's food delivery fleet tops 120,000 full-time riders
-
JD.com'sfull-timefooddeliveryfleethassurpassed120,000ridersandisexpectedtoexceed150,00...
- China willing to share military equipment achievements with friendly countries: defense ministry
-
BEIJING,July8(Xinhua)--Chinahasalwaystakenaprudent,responsibleapproachtomilitaryexpor...
- FJK-SJRFPZS防爆阀位行程开关等级
-
解答常见误区在工业自动化和安全控制领域,FJK-SJRFPZS防爆阀位行程开关等级是一个关乎设备安全与运行效率的重要参数。许多用户在选择和应用这类开关时,可能对其等级分类存在一些误解。本文将通过通俗易...
- JD's 618 Festival Smashes Records as AI Powers Next-Gen Retail Engine
-
AsianFin–JD.com’s2025“618ShoppingFestival”wrappedupwithrecord-breakingmomentum,drivenby...
- JD’s Food Delivery Blitz Shakes Meituan as Founder Wang Xing Vows to Win at All Costs
-
Credit:CFPAsianFin--JD.comInc.isturninguptheheatinChina'sfooddeliverywars,andfounder...
- 一周热门
- 最近发表
-
- 首次被击毁!低调但先进的S-350,为何活得比韩国仿版差这么多?
- Windows 10 LTSC 2021 vs 2019:哪个更适合你?
- 叛变投敌?俄军最先进隐身无人机S-70,在乌东上空被苏-57击落!
- 自动驾驶车祸致1死1伤!特斯拉被判赔偿2.43亿美元
- HP488DZ 无绳电锤钻(18V)牧田DTD156SFJ
- FJK-SJRFPZS防爆阀位行程开关级
- China's PLA aerobatic team to perform in Thailand for 50th anniversary of bilateral diplomatic ties
- JD.com Enters Travel and Hospitality With Supply Chain-Focused Strategy
- JD.com Drives Robotics Funding Frenzy With Investments in LimX Dynamics, Spirit AI, and EngineAI
- JD.com opens first JD Mall in Beijing, steps up offline retail push
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)