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

最新推荐文章于 2024-03-29 10:28:03 发布

夜雨听萧瑟

最新推荐文章于 2024-03-29 10:28:03 发布

阅读量2.6k

点赞数 1

分类专栏：前端

原文链接：https://blog.csdn.net/Charliewolf/article/details/84790622

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

版权声明：本文为博主原创文章，遵循 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="函数名()"进行调用。
不过，这几种方法在使用时略有区别。

夜雨听萧瑟

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html模板里引入js函数的几种方法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。转载于：https://blog.csdn.net/Charliewolf/article/details/84790622第一种方法<!DOCTYPE html><html lang="en" style="height: 100%"><head&gt...
复制链接

扫一扫