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/ ...
随机推荐
- $.ajax()方法参数总结
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和d ...
- 【BZOJ 1592】[Usaco2008 Feb]Making the Grade 路面修整 dp优化之转移变状态
我们感性可证离散(不离散没法做),于是我们就有了状态转移的思路(我们只考虑单不减另一个同理),f[i][j]到了第i块高度为j的最小话费,于是我们就可以发现f[i][j]=Min(f[i-1][k]) ...
- 【COGS 2434】 暗之链锁 树上差分+LCA
差分就是把一个值拆成许多差的和如 1 2 4 6 9 那么 把这个东西拆成 1 1 2 2 3 就是了,当然也可以理解为对一个问题分解为多个子问题并对其进行操作来得到原问题的答案. 树上差分就更玄妙了 ...
- cookie 是存储于访问者的计算机中的变量
今天把javascript如何用来创建及存储cookie复习了一下,其中的一点体会拿出来和大家讨论,首先看一下基础知识: 什么是cookie cookie 是存储于访问者的计算机中的变量.每当同一台计 ...
- 做一个所见即所得的CSS效果
style 也是标签(在非ie内核的浏览器中支持),我们将style设置成 contenteditable的时候,那么那的内容就可以编辑了.仔细的体验下,如果我们将背景修改成红色的.那么只要书写完,立 ...
- ExtJS 4.1 TabPanel动态加载页面并执行脚本【转】
ExtJS 4.1 TabPanel动态加载页面并执行脚本 按照官方示例,可以动态加载页面,可是脚本不执行,于是查SDK.google,发现scripts需要设置为true,于是设置该属性,整个代码如 ...
- 怎么把centos虚拟机zip文件导入vm虚拟机中
执行以上三步就可以将一个压缩的centoszip文件导入到虚拟机中
- ansible+docker
1.准备镜像: 1007 docker run -itd --name client2 ff37bc5ab732 1008 docker run -itd --name client ff37bc5a ...
- AtCoder Regular Contest 082 E
Problem Statement You are given N points (xi,yi) located on a two-dimensional plane. Consider a subs ...
- （接口自动化）Python3操作MySQL数据库
基础语法: import pymysql #导入模块 conn = pymysql.connect(host='localhost',user='root', passwd='123456', db= ...