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

最新推荐文章于 2024-09-24 09:43:15 发布

Elonjelinek

最新推荐文章于 2024-09-24 09:43:15 发布

阅读量8.7k

点赞数 1

文章标签： js函数

本文链接：https://blog.csdn.net/charliewolf/article/details/84790622

版权

本文介绍了在HTML模板中引入JavaScript函数的三种方法。包括直接在HTML中定义函数并执行，使用匿名函数在页面加载时执行，以及通过标签调用函数。每种方法在实际应用中都有其特定场景和注意事项。

摘要由CSDN通过智能技术生成

第一种方法

<!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="函数名()"进行调用。
不过，这几种方法在使用时略有区别。

Elonjelinek

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫