在页面加载时调用 JavaScript 函数

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在页面加载时调用 JavaScript 函数

作者：迹忆客最近更新：2024/03/18 浏览次数：

加载网页时可以调用的函数。这个约定取决于浏览器对象 window 及其属性 onload。了解你的函数是否被调用的基本方法是检查控制台面板。

对于演示示例，我们将考虑一个 HTML 结构，我们希望在其中可视化我们的输出。每次我们重新加载网页时，控制台面板都会响应由 window.onload 属性指示的给定语句。

以变量为参数的 JavaScript 函数

在这里，我们将使用一个将变量作为参数的函数。此外，在 jsbin 中试验的编码驱动是为了更好地理解。无论哪种方式，你都可以使用你的浏览器和首选编辑器。

代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
 
</head>
<body onload = func()>
  <p id="output"></p>
<script>  
var x = 40;
var y = 2;
  
function func(x, y){
  return x+y;
}

window.onload = function(){
 console.log(func(x,y)); 
}

document.getElementById('output').innerHTML = func(x,y);
</script>
</body>
  
</html>

输出：

在这种情况下，脚本部分被添加到 HTML 正文中，如你所见，在网页的每次加载时，控制台都有一个值，说明整个代码正在运行。

此外，window.onload 的基本用例是确保每次都成功加载页面。它很可能用作确保 HTML 中无错误代码块的参数。因此，你可以根据自己的方便在任何地方使用它。

加载时以函数为参数的 JavaScript 调用函数

以下示例将以不同方式解释 window.onload 属性的功能。我们将使用一个 HTML 代码部分和一个单独的 JavaScript 代码部分。我们函数的参数是其他一些函数。

代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    p{
      background: white;
    }
  </style>
</head>
<body onload = func()>
  <p id="output"></p>
</body>
  
</html>

function f1() {
  return '4';
}

function f2() {
  return '2';
}

function func(f1, f2) {
  return f1() + f2();
}

window.onload =
    function() {
  console.log(func(f1, f2));
}

    document.getElementById('output')
        .innerHTML = func(f1, f2);