html怎么嵌入js代码（JavaScript代码嵌入HTML的方法、及两者的在执行流程上的细微区别）
为了执行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－
,
- 黑鲨手机闪充模式怎么开启（5）
- 人工智能的兴起带来哪些好处（人工智能的好处）
- 洋姜怎么做好吃（莲藕山药靠边站）
- 斯米克瓷砖是几线品牌（如何快速辨别瓷砖的质量问题）
- 地震发生了躲在哪里最安全（收下这份地震逃避指南）
- 成人高考报名入口官网（2023年各省成考网报网址）
- 冬天多肉可以淋雨吗（看情况）
- 淘宝上显示包裹正在等待揽收是什么意思（发货的却不是店家）
- 华为手机如何清除卸载的应用（仍然觉得很占内存卡顿）
- 如何给房间驱蚊驱虫（只需要一碗水就可以）
- 手绘线稿如何上色（大触教你上色）
- 本命年结婚好吗（有什么讲究）
- 钢琴怎么弹（打好基础很重要）
- 盘他原来是什么梗（甭管他什么东西盘他视频出处）
- 让爱情保鲜的十个方法（10种维持爱情的秘诀）
- 怎么对待身边嫉妒你的人（用这三招制服他）
- 怎样提高课堂的教学质量（如何提高教学质量）
- 聪明节是什么节（1月6日蚂蚁庄园课堂答案）
