如何跨html调用js函数调用

要实现跨HTML页面调用JavaScript函数，可以采用以下几种方法：

（图片来源网络，侵删）

1、使用window.opener对象

当一个HTML页面通过window.open()方法打开另一个HTML页面时，被打开的页面可以通过window.opener对象访问打开它的页面的JavaScript函数，有两个HTML页面：parent.html和child.html，在parent.html中，我们通过window.open()方法打开child.html，然后在child.html中调用parent.html的JavaScript函数。

parent.html代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChildPage()">Open Child Page</button>
    <script>
        function openChildPage() {
            window.open('child.html', '_blank');
        }
        function showMessage() {
            alert('Hello from parent page!');
        }
    </script>
</body>
</html>

child.html代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="callParentFunction()">Call Parent Function</button>
    <script>
        function callParentFunction() {
            window.opener.showMessage();
        }
    </script>
</body>
</html>

2、使用postMessage和onmessage事件

通过window.postMessage()方法，我们可以在不同的HTML页面之间发送消息，接收方可以通过监听onmessage事件来接收消息并执行相应的操作，有两个HTML页面：parent.html和child.html，在parent.html中，我们通过window.open()方法打开child.html，然后在child.html中通过postMessage向parent.html发送消息，parent.html监听到消息后执行相应的JavaScript函数。

parent.html代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <button onclick="openChildPage()">Open Child Page</button>
    <script>
        function openChildPage() {
            var childWindow = window.open('child.html', '_blank');
            childWindow.addEventListener('message', function(event) {
                if (event.origin === 'http://localhost') {
                    showMessage();
                }
            });
        }
        function showMessage() {
            alert('Hello from parent page!');
        }
    </script>
</body>
</html>

child.html代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="sendMessageToParent()">Send Message to Parent</button>
    <script>
        function sendMessageToParent() {
            window.opener.postMessage('callShowMessage', 'http://localhost');
        }
    </script>
</body>
</html>

以上就是两种跨HTML页面调用JavaScript函数的方法，在实际开发中，可以根据需求选择合适的方法来实现跨页面调用。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/403348.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。