JavaScript代码放在head和body的区别(QRCode生成)
1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始。
2.在body中时,直接加载并执行
典型的区别:
如果有不在函数中的执行语句,比如变量初始化,如果在head中就不会执行。
举个栗子:
这段代码会生成一个二维码,二维码的跳转地址为text中超链接
a.js放在body中,可生成二维码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head> <body>
<div id="qrcode"></div>
<script>
$('#qrcode').qrcode({
width: 128,
height: 128,
text: "http://www.bsnc.cn"
})
</script>
</body> </html>
b.js放在head中,网页为空白,没有执行js中内容
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
$('#qrcode').qrcode({
width: 128,
height: 128,
text: "http://www.bsnc.cn"
})
</script>
</head> <body>
<div id="qrcode"></div>
</body> </html>
c.js放在head中,用window.onload函数执行js文件,这样仍然会生成二维码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
window.onload = function() {
$('#qrcode').qrcode({
width: 128,
height: 128,
text: "https://www.cnblogs.com/GG-Bond/"
})
}
</script>
</head> <body>
<div id="qrcode"></div>
</body> </html>
生成的二维码:
总结:body中js代码直接执行,head中代码需要触发条件
基于jquery的二维码生成插件qrcode,下载网址:https://github.com/jeromeetienne/jquery-qrcode/
JavaScript代码放在head和body的区别(QRCode生成)的更多相关文章
- javascript 代码放在head和body的区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- JavaScript代码放在HTML代码不同位置的差别
通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...
- asp.net mvc页面javascript代码中如何使用razor
我们需要用<text>将javascript代码包含起来,强制让razor编译器回到内容模式, 或者将javascript代码放在函数中,让razor编译器可以识别,请看下面两个例子: & ...
- css和javascript代码写在页面中的位置说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]JavaScript放在<head>和<body>的区别
原文:http://liminhappygirl.iteye.com/blog/1841360 javaScript放在<head>和<body>的区别: 在HTML body ...
- javaScript放在head和body的区别
JavaScript写在哪里? 内部:Html网页的<body></body>中: 内部:Html网页的<head></head>中: 外部:外部js文 ...
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...
- JavaScript之将JS代码放在什么位置最合适
1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
随机推荐
- BZOJ day1
十题击破 1051108811921432195119682242245624632761
- 整理一些JavaScript时间处理扩展函数
在JavaScript中,时间处理是经常需要用到的.最近想要慢慢建立自己的代码库,整理了几个之前用到的js处理时间的函数,发出来跟大家分享一下,以后的使用中会不断增加和修改代码库. 把字符串转换为日期 ...
- IOI1998 Polygon [区间dp]
[IOI1998]Polygon 题意翻译 题目可能有些许修改,但大意一致 多边形是一个玩家在一个有n个顶点的多边形上的游戏,如图所示,其中n=4.每个顶点用整数标记,每个边用符号+(加)或符号*(乘 ...
- POJ2112:Optimal Milking(Floyd+二分图多重匹配+二分)
Optimal Milking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 20262 Accepted: 7230 ...
- loj6029 「雅礼集训 2017 Day1」市场
传送门:https://loj.ac/problem/6029 [题解] 考虑如果有一些近似连续的段 比如 2 2 2 3 3 3,考虑在除3意义下,变成0 0 0 1 1 1,相当于整体-2 又:区 ...
- Raspberry Pi 3b+ 配置摄像头
1.开启摄像头硬件接口 raspi-config > Interfacing Options > Camera 2.测试 raspistill -v -o test.jpg
- elastaticsearch
# https://elasticsearch-dsl.readthedocs.io/en/latest/ # 文档:https://es.xiaoleilu.com/054_Query_DSL/70 ...
- Swift教程之运算符重载
http://blog.csdn.net/mengxiangyue/article/details/43437797 原文地址:http://www.raywenderlich.com/80818/o ...
- ARM 处理器架构【转】
ARM 处理器架构 转自:http://www.arm.com/zh/products/processors/instruction-set-architectures/index.php ARM 架 ...
- (五)对linux内核中jiffies+Hz表示一秒钟的理解
jiffies在内核中是一个全局变量,它用来统计系统启动以来系统中产生的总节拍数,这个变量定义在include/Linux/jiffies.h中,定义形式如下. unsigned long volat ...