如何在一个页面的js触发另一个页面js里的函数,需要详细解释,并且给出示例代码
时间: 2024-04-04 16:35:26 浏览: 24
在一个页面的 JavaScript 中,要触发另一个页面的 JavaScript 函数,可以使用 `window.postMessage` 方法。
`window.postMessage` 方法允许跨文档通信,可以向其他窗口发送消息。具体来说,可以在一个窗口中调用 `window.postMessage` 方法,向另一个窗口发送消息,该窗口可以是当前窗口的一个 iframe 或者是另一个窗口。这个方法需要传递两个参数:发送的消息和接收消息的窗口的 origin(源)。
下面是一个示例代码:
页面1中的代码:
```javascript
// 创建一个 iframe 元素
var iframe = document.createElement('iframe');
iframe.src = 'http://example.com/page2.html';
document.body.appendChild(iframe);
// 向 iframe 发送消息
iframe.contentWindow.postMessage('hello', 'http://example.com');
```
页面2中的代码:
```javascript
// 监听消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://example.com') {
console.log(event.data); // 输出 "hello"
myFunction();
}
});
// 定义一个函数
function myFunction() {
console.log('myFunction is called');
}
```
在页面1中,创建了一个 iframe 元素,并向其中的页面发送消息。在页面2中,监听 `message` 事件,当接收到来自 `http://example.com` 的消息时,就会执行 `myFunction` 函数。这样,就可以在页面1中触发页面2中的 JavaScript 函数了。