html模板里引入js函数的几种方法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
转载于：https://blog.csdn.net/Charliewolf/article/details/84790622
第一种方法

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="UTF-8"><title>引入函数</title><meta http-equiv="refresh" content="10;url=http://localhost:8080/ab"><link rel="stylesheet" href="../static/css/blogsheet.css"><script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script><script type="text/javascript" src="../static/js/lib/jquery.url.js"></script><script>window.onload = function () {fff()}function fff() {alert("hahhh")}</script>
</head>
<body style="width: 100%;height: 100%">
{{template "header"}}
<div class="container" style="width: 100%;min-height: 100%;background-color: rgba(255,187,5,0.22)"><div style="width: 100%;height: 100%;padding-bottom: 50px;background-color: #ff552f"></div>
</div>
{{template "footer"}}
</body>
</html>

核心代码：

<script>window.onload = function () {fff()}function fff() {alert("hahhh")}
</script>

这样加载页面时函数fff()就会被调用执行。

当然，直接在第一段内容中写函数逻辑也可以，比如这样：

<script>window.onload = function () {alert("?哈哈哈哈哈");ffff();}function ffff() {alert("哈哈哈哈")}
</script>

第二种方法：

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="UTF-8"><title>引入函数</title><meta http-equiv="refresh" content="10;url=http://localhost:8080/ab"><link rel="stylesheet" href="../static/css/blogsheet.css"><script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script><script type="text/javascript" src="../static/js/lib/jquery.url.js"></script><script>$(function(){alert("哈哈哈哈哈哈哈")})</script>
</head>
<body style="width: 100%;height: 100%">
{{template "header"}}
<div class="container" style="width: 100%;min-height: 100%;background-color: rgba(255,187,5,0.22)"><div style="width: 100%;height: 100%;padding-bottom: 50px;background-color: #ff552f"></div>
</div>
{{template "footer"}}
</body>
</html>

核心代码

<script>$(function(){alert("哈哈哈哈哈哈哈")})
</script>

这样就是直接在加载页面时，执行该匿名函数。

第三种方法

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="UTF-8"><title>引入函数</title><meta http-equiv="refresh" content="10;url=http://localhost:8080/ab"><link rel="stylesheet" href="../static/css/blogsheet.css"><script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script><script type="text/javascript" src="../static/js/lib/jquery.url.js"></script><script>function fff() {alert("啊哈哈哈哈哈哈")}</script>
</head>
<body style="width: 100%;height: 100%" onload="fff()">
{{template "header"}}
<div class="container" style="width: 100%;min-height: 100%;background-color: rgba(255,187,5,0.22)"><div style="width: 100%;height: 100%;padding-bottom: 50px;background-color: #ff552f"></div>
</div>
{{template "footer"}}
</body>
</html>

核心代码：

<script>function fff() {alert("啊哈哈哈哈哈哈")}
</script><body style="width: 100%;height: 100%" onload="fff()"></body>

这种方法需要在body标签中使用onload="函数名()"进行调用。
不过，这几种方法在使用时略有区别。

html模板里引入js函数的几种方法相关推荐

一个html中同时引入js和ts,《使用require在ts里引入js》
在Money.vue组件里,我们使用localStorage,在用户输入完一系列选择以后,如选择了什么标签,写了什么备注,支出还是收入,以及记账金额,点击ok按钮的时候,把这些数据收集到record对 ...
js function定义函数的4种方法
js function定义函数的4种方法 1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: 复制代码代码如下: function func(){} 或 var func=funct ...
使用ob_gzhandler函数有3种方法让它对php进行压缩
减小代码在传输中的大小,就能提高页面的传输速度,打开网页也就快了.在一起PHP程序中像WordPress是默认的gzip压缩功能是通过ob_gzhandler这个函数来实现的,ob_gzhandle ...
js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
python 字符串删除重复_Python删除list里的重复元素有几种方法？
公众号新增加了一个栏目,就是每天给大家解答一道Python常见的面试题,反正每天不贪多,一天一题,正好合适,只希望这个面试栏目,给那些正在准备面试的同学,提供一点点帮助! 小猿会从最基础的面试题开始, ...
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法第一种方法–向body动态写入div标签调用css效果显示: (新建***.jsp放在WebContent根目录下直接访问ip ...
strlen函数的用法及模拟实现strlen函数的两种方法
strlen函数的用法及模拟实现strlen函数的两种方法一.strlen函数的用法 strlen的简单应用二.指针模拟实现strlen函数三.递归模拟实现strlen函数一.strlen函数 ...
node.js取参四种方法req.body,req.params,req.param,req.body
node.js取参四种方法req.body,req.params,req.param,req.body 参考:https://my.oschina.net/u/2519530/blog/535309 ...
JavaScript 循环中调用异步函数的三种方法，及为什么 forEach 无法工作的分析
JavaScript 循环中调用异步函数的三种方法,及为什么 forEach 无法工作的分析业务分析初版的问题解决方案传统的 for 循环不使用 for 循环的解决方案分析 forEach ...
STM32延时函数的四种方法：普通延时（2种）、SysTick 定时器延时（2种）
STM32延时函数的三种方法:普通延时.SysTick 定时器延时(1.中断方式:2.非中断方式) 单片机编程过程中经常用到延时函数,最常用的莫过于微秒级延时delay_us( )和毫秒级delay_ ...

html模板里引入js函数的几种方法

html模板里引入js函数的几种方法相关推荐

最新文章

热门文章