在跨域消息传递的情况下,可以使用浏览器提供的 postMessage API 来实现。postMessage 允许不同域名之间进行安全的消息传递。下面是一个简单的示例,展示如何在 a.com 域名中生成一个事件,并触发 b.com 域名中的油猴脚本执行某项操作。
在 a.com 中生成事件并发送消息首先,在 a.com 页面中添加发送消息的代码。
// 在 a.com 中运行的脚本
function sendMessageToB() {
// 获取 b.com 的窗口对象
const bWindow = window.open('https://b.com');
// 等待 b.com 页面加载完成
bWindow.onload = function() {
// 发送消息到 b.com
bWindow.postMessage({ action: 'executeScript' }, 'https://b.com');
};
}
// 触发发送消息的事件
document.getElementById('sendMessageButton').addEventListener('click', sendMessageToB);
在 b.com 中接收消息并执行操作接下来,在 b.com 中编写油猴脚本来接收消息并执行相应的操作。
// ==UserScript==
// @name B.com Script
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Receive message from a.com and execute script
// @author You
// @match https://b.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 添加消息事件监听器
window.addEventListener('message', function(event) {
// 检查消息来源是否是 a.com
if (event.origin !== 'https://a.com') {
return;
}
// 检查消息内容并执行相应操作
if (event.data.action === 'executeScript') {
// 在 b.com 执行某项操作
console.log('Message received from a.com, executing script...');
// 这里可以添加你想在 b.com 执行的代码
}
}, false);
})();
解释a.com 页面中的脚本:
sendMessageToB 函数打开 b.com 页面并等待其加载完成。加载完成后,使用 postMessage 向 b.com 发送一条消息,消息内容为 { action: 'executeScript' }。b.com 中的油猴脚本:
使用 window.addEventListener('message', callback) 添加消息事件监听器。在回调函数中,首先检查消息的来源是否为 a.com,以确保安全性。如果消息内容的 action 为 executeScript,则执行相应的操作。注意事项安全性:确保只接受来自可信来源的消息,避免潜在的安全风险。跨域限制:有些浏览器可能对跨域窗口对象的访问有严格限制,确保在不同浏览器中测试你的实现。通过上述方法,你可以实现不同域名之间的消息传递,并在接收到消息时触发相应的操作。
网友回复


