Javascript位置 body之前、后执行顺序
简介:
当页面加载的时候,嵌入html标记的js代码和位于<body></body>之间的js代码将被执行;当调用的时候,位于<head></head>之间代码和外部js文件代码将被执行
1.根据实际需要放置代码?
有时候,您实际上需要把代码放置在不同地方以符合代码运行要求。比如,您需要在代码全部载入浏览器后再运行代码,那就可以
将<script>标签放在</html>后面去,如果您需要在页面载入的时候运行代码,可以把js代码放入<head></head>之间。
提示:浏览器执行html代码是自上而下的线性过程,<script>作为html代码的一部分同样遵循这个原则!
2.<head>部分js脚本
放入<head>部分js代码将在页面加载完之前被载入,书写如下:
<head>
<script type="text/javascript">
//js代码放在这儿
</script>
</head>
<body>
</body>
</html>
3.<body>部分js脚本
放入<body>部分js代码将在页面载入的时候被执行,也可以把脚本放入</html>后面,这将在页面载入完成之后被执行,代码如下:
<head>
</head>
<body>
<script type="text/javascript">
alert("<body>中代码被执行")
</script>
</body>
</html>
<script type="text/javascript" language="Javascript">
<!--
document.write("html代码已经全部载入完成");
//-->
</script>
代码分析:
引号中内容被显示在对话框中,当您运行这段代码的时候,您将首先看到弹出对话框,关闭对话框后,将在页面显示如下信息:
4.<body>和<head> 部分脚本
您可以同时在这两个标签部分写入js代码,浏览器将同样遵循代码执行顺序,代码如下:
<head>
<script type="text/javascript">
alert("<head>中代码被执行");
</script>
</head>
<body>
<script type="text/javascript">
alert("<body>中代码被执行");
</script>
</body>
</html>
代码分析:
您将先看到<head>部分代码对话框被显示,当你关闭这个对话框时,将接着显示<body>部分代码对话框。
5.引用外部JavaScript文件
当您需要在不同页面调用js代码以执行不同响应的时候,您可以考虑使用外部引用js文件,同时,这样做还能提高代码的维护。
<head>
<script src="yourjsname.js"></script>
</head>
<body>
</body>
</html>
代码分析:
通过这段代码就可以引用外部文件,src属性用于引用外部文件地址。
提示:在js文件中不需要<script>标签,您可以直接写入js代码。
注意:这里的标记必须写成<script src="yourjsname.js"></script>形式,而不能写成<script src="yourjsname.js"/>
否则浏览器无法正确识别。
----------------------------------------------------------------------------------------------------------------
Javascript 执行顺序
<html>
<meta http-equiv="content-type" content="text;charset=UTF-8" />
<head>
<script type="text/javascript">
alert("<head>中代码被执行")
</script>
</head>
<body>
1234
<script type="text/javascript">
alert("<body>中代码被执行")
</script>
fffff
</body>
</html>
<script type="text/javascript" language="Javascript">
<!--
document.write("html代码已经全部载入完成");
//-->
</script>
Javascript位置 body之前、后执行顺序的更多相关文章
- javascript的预编译和执行顺序
		
原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...
 - JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载
		
JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...
 - Javascript位置 body之前、后执行顺序(探讨)!
		
转载来自:http://blog.csdn.net/dxnn520/article/details/7927461 简介:当页面加载的时候,嵌入html标记的js代码和位于<body>&l ...
 - 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
		
一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...
 - Javascript加载执行顺序
		
本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...
 - JS的预编译和执行顺序 详析(及全局与局部变量)
		
最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题: <html> <head> <title> ...
 - JS的预编译和执行顺序 详析
		
原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 复制代码 代码一 <ht ...
 - Javascript中页面加载完成后优先执行顺序
		
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
 - 【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序
		
三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; ...
 
随机推荐
- 微信企业号办公系统-JSSDK上传图片(多图上传)
			
在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...
 - [转载]CString类常用方法----Left(),Mid(),Right()……
			
CStringLeft(intnCount)const; //从左边1开始获取前 nCount个字符 CStringMid(intnFirst)const; //从左边第 nCount+1个字符开始, ...
 - Hadoop工程包架构解析
			
Hadoop源码解析 1 --- Hadoop工程包架构解析 1 Hadoop中各工程包依赖简述 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算 ...
 - 在Windows上启用LDAPs
			
公司的环境比较特殊, Windows server + Linux desktop, 所以我们希望在server端启用LDAP over SSL功能. 当中走了不少弯路, 网上文章也搜了一大堆, 千辛 ...
 - 通过SEP屏蔽共享文件夹
			
Go to Policies – Application and Device Control. Select default Application and Device Control polic ...
 - 【iHMI43 应用演示】之 modbus 协议(从机)通信演示
			
============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...
 - HDU 1003 基础dp 最大连续序列和
			
常常做错的一道题.. 因为总是要有一个长度的 所以一开始的s与e都是1 maxx也是a[1] 然后再求 从i=2开始 在这里注意 me永远是当前i 而ms则可能留在原地 可能直接等于i 判断条件就是当 ...
 - [办公自动化]Wlan无法启动,无法连接无线网wifi,所有无线网都搜索不到
			
转帖: http://support1.lenovo.com.cn/lenovo/wsi/htmls/detail_20121023172943554.html 故障现象: 启动wlan autoco ...
 - DS实验题 sights
			
算法与数据结构实验题 6.3 sights ★实验任务 美丽的小风姑娘打算去旅游散心,她走进了一座山,发现这座山有 n 个景点, 由于山路难修,所以施工队只修了最少条的路,来保证 n 个景点联通,娇弱 ...
 - 总结的一些PHP开发中的tips
			
总结的一些PHP开发中的tips 发布时间:2013-05-28 12:47:44 来源: 评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心 ...