在页面加载时调用 JavaScript 函数

Anika Tabassum Era 2023年1月30日 2022年5月1日
  1. 以变​​量为参数的 JavaScript 函数
  2. 加载时以函数为参数的 JavaScript 调用函数
在页面加载时调用 JavaScript 函数

加载网页时可以调用的函数。这个约定取决于浏览器对象 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>

输出:

带有可变参数函数的 onload js 函数

在这种情况下,脚本部分被添加到 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);

输出:

带函数参数函数的 onload js 函数

从输出场景来看,每当按下 Run with JS 时,它都会提供类似加载网页的体验。代码没有错误,这是我们可以通过在每次页面加载时调用函数得出的可推断语句。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Function