js代码放在head和body的区别(QRCode生成)
Posted Star灬木子李
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js代码放在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/
以上是关于js代码放在head和body的区别(QRCode生成)的主要内容,如果未能解决你的问题,请参考以下文章