第一种方法

<!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函数的几种方法