Nodejs服务器中的页面如何调用客户端页面中的代码？

Nodejs服务器中的页面如何调用客户端页面中的代码？

nodeJs服务器端分配了一个路由，此路由显示一个页面，包含一个按钮和一个文本框。在客户端有一个页面用iframe包含了服务器端的这个页面。 服务器端的页面点击按钮想要调用客户端页面中的JS方法，应该怎样实现？ 我的思路是：使用父子窗口通信的方法，在服务器端的JS方法中使用window.parent.XX()语句来调用客户端中的XX()，但是这句代码不执行。 求高手指教！！

2 回复

要实现Node.js服务器中的页面调用客户端页面中的代码，可以利用浏览器的postMessage API来实现跨域或跨窗口的通信。这种方式可以让父窗口（即包含iframe的页面）与子窗口（即iframe加载的页面）之间进行安全的消息传递。

以下是一个简单的示例来展示如何实现这一功能：

1. 客户端页面（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <h1>Main Parent Page</h1>
    <iframe id="childFrame" src="child.html" width="400" height="300"></iframe>

    <script>
        // 监听来自iframe的message事件
        window.addEventListener('message', function(event) {
            // 检查消息来源是否可信
            if (event.origin !== 'http://localhost:3000') return;

            console.log('Received message:', event.data);
        }, false);

        function handleButtonClick(message) {
            // 发送消息到iframe
            const iframe = document.getElementById('childFrame').contentWindow;
            iframe.postMessage(message, 'http://localhost:3000');
        }
    </script>

    <button onclick="handleButtonClick('Hello from parent')">Send Message to Child</button>
</body>
</html>

2. 服务器端页面（child.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <input type="text" id="inputText" placeholder="Enter something...">
    <button onclick="sendMessage()">Send Message</button>

    <script>
        function sendMessage() {
            // 获取输入框内容
            const text = document.getElementById('inputText').value;
            // 发送消息给父窗口
            window.parent.postMessage(text, 'http://localhost:3000');
        }

        // 监听来自父窗口的消息
        window.addEventListener('message', function(event) {
            // 检查消息来源是否可信
            if (event.origin !== 'http://localhost:3000') return;

            console.log('Received message from parent:', event.data);
        }, false);
    </script>
</body>
</html>

解释：

  • 客户端页面 (index.html) 包含一个iframe，指向child.html。它定义了一个按钮，点击时会向iframe发送消息。
  • 服务器端页面 (child.html) 包含一个文本框和一个按钮。当按钮被点击时，它会读取文本框的值并通过postMessage发送给父窗口。
  • 两个页面都通过addEventListener监听message事件，并验证消息的来源以确保安全性。

这样，通过postMessage API，你可以在父窗口和子窗口之间安全地传递信息。


要在Node.js服务器中的页面调用客户端页面中的代码，可以利用浏览器提供的父子窗口通信机制（如postMessage）来实现跨域或不同窗口间的通信。

示例代码

服务器端（Express）

首先，假设你使用Express创建了一个简单的服务器，并提供了一个HTML页面：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send(`
        <html>
            <head>
                <title>Server Page</title>
                <script>
                    function callClientFunction(message) {
                        // 使用 postMessage 向父窗口发送消息
                        window.parent.postMessage({ message }, '*');
                    }
                </script>
            </head>
            <body>
                <button onclick="callClientFunction('Hello from server')">Click Me</button>
            </body>
        </html>
    `);
});

app.listen(port, () => console.log(`App listening on port ${port}`));

客户端

客户端页面通过<iframe>嵌入了服务器端页面，并监听来自服务器端的消息：

<!DOCTYPE html>
<html>
<head>
    <title>Client Page</title>
    <script>
        // 监听来自iframe的消息
        window.addEventListener('message', (event) => {
            if (event.origin !== 'http://localhost:3000') return; // 确保消息来自正确的源
            console.log('Received:', event.data.message);
        });
    </script>
</head>
<body>
    <iframe src="http://localhost:3000" width="300" height="300"></iframe>
</body>
</html>

解释

  1. 服务器端代码：定义了一个简单的Express应用，该应用提供了一个HTML页面，其中包含一个按钮。当用户点击按钮时，会触发callClientFunction函数，该函数通过window.parent.postMessage向父窗口发送消息。

  2. 客户端代码：定义了一个HTML页面，其中包含一个<iframe>标签，该标签指向服务器端页面。页面中还包含了一个事件监听器，用于接收并处理从服务器端页面传递过来的消息。

通过这种方式，服务器端页面可以通过postMessage调用客户端页面中的JavaScript函数。注意，为了确保安全性，接收消息的代码应检查消息的来源（event.origin），以防止恶意站点的注入攻击。

回到顶部