正文

跨页面JavaScript调用：轻松实现父页面函数执行技巧

/0 浏览量
0427

在Web开发中，有时候我们需要在子页面中调用父页面的函数，或者反之。这可以通过JavaScript中的window对象来实现。下面，我将详细介绍如何在不同的页面之间进行跨页面函数调用。

父页面调用子页面函数

假设我们有一个父页面（parent.html）和一个子页面（child.html）。在父页面中，我们有一个函数parentFunction，我们希望在子页面中调用这个函数。

子页面代码

首先，在子页面child.html中，我们需要使用window.parent来访问父页面的window对象，并调用parentFunction。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <button onclick="callParentFunction()">Call Parent Function</button>

    <script>
        function callParentFunction() {
            window.parent.parentFunction();
        }
    </script>
</body>
</html>

父页面代码

在父页面parent.html中，定义parentFunction函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <script>
        function parentFunction() {
            alert('This is a function in the parent page!');
        }
    </script>
</body>
</html>

子页面调用父页面函数

同样地，如果我们想在子页面中调用父页面的函数，可以在父页面中定义一个全局函数，并在子页面中调用。

父页面代码

在父页面parent.html中，定义一个全局函数parentFunction。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <script>
        function parentFunction() {
            alert('This is a function in the parent page!');
        }
    </script>
</body>
</html>

子页面代码

在子页面child.html中，直接调用parentFunction。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <button onclick="parentFunction()">Call Parent Function</button>

    <script>
        function parentFunction() {
            window.parent.parentFunction();
        }
    </script>
</body>
</html>

总结

通过以上方法，我们可以轻松地在不同的页面之间进行函数调用。在实际开发中，这种方法可以用于各种场景，例如在单页面应用（SPA）中，我们可以通过这种方式在不同组件之间传递数据和调用函数。

-- 展开阅读全文 --