gues1688
发表于 2024-9-3 20:44:00
感谢C大,让我理解了如何跨域拦截广告元素。
发现了一个技巧:当主页面成功接收到 frame 发来的消息后,在主页面就可以处理 iframe 了,也就是变成跟**同源** iframe 一样了。
szzxc
发表于 2024-9-26 17:58:41
是不是写个例子参考一下,
例如有一个页A,页面B, 页面C, A和B是跨域的, B和C是同域的, 我想在A页面点AA键= B页面的BB的功能(元素BB),
现在是用油猴在A页面嵌入的B页(移到显示之外),但是想通过A页面点击元素AA, 等同执行B页面的BB元素。
// 创建一个iframe并设置其src
const iframe = document.createElement('iframe');
iframe.src = 'https://www.abc.com/bb.html';
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.position = 'absolute';
iframe.style.left = '-9999px'; // 将iframe移到屏幕外
document.body.appendChild(iframe);
但是好像不太好操作。能否给个例子参考一下
cxxjackie
发表于 2024-9-26 23:11:56
szzxc 发表于 2024-9-26 17:58
是不是写个例子参考一下,
例如有一个页A,页面B, 页面C, A和B是跨域的, B和C是同域的, 我想在A页面 ...
没太看懂你的描述,C页面又是干嘛的?如果想在A页面触发B页面的功能,要先监听A页面的点击,然后向B页面发消息,B页面收到消息以后自己触发自己页面内的功能。如果中间还嵌套了一个C,原理是相同的,即多一次消息的转发,最终还是由对应页面在自己域内触发自己的功能,消息只是起到一个指示何时触发的作用。
另外:不显示iframe用 style.display = 'none' 更方便。
szzxc
发表于 2024-9-27 09:06:21
如何 向B页面发消息,B页面收到消息以后自己触发自己页面内的功能, 监听A页面这个可以,怎么传递B, 并执行B页面上的操作呢? 实上要执行是C页面上,不过因为要进C,首次必须一定要先跳转B页面。才可以到C。
szzxc
发表于 2024-9-27 09:07:06
另外:不显示iframe用 style.display = 'none' 更方便。 用这个还能操作页面iframe里面的元素么?
cxxjackie
发表于 2024-9-27 22:13:26
szzxc 发表于 2024-9-27 09:06
如何 向B页面发消息,B页面收到消息以后自己触发自己页面内的功能, 监听A页面这个可以,怎么传递B, 并执行 ...
你把A和B理解成2个脚本,只是写在一起了,环境是不互通的,通过location.href可以判断当前是哪个页面(或者说哪个脚本),A脚本监听到点击后传递给B(随便传什么东西只要能理解是被点击了),B脚本接收到消息后执行自己的操作,具体可以看我那个百度和b站交互的例子。
隐藏后应该是能正常触发的,具体要看你触发的是什么操作。
szzxc
发表于 2024-9-29 09:35:50
cxxjackie 发表于 2024-9-26 23:11
没太看懂你的描述,C页面又是干嘛的?如果想在A页面触发B页面的功能,要先监听A页面的点击,然后向B页面 ...
利用postMessage 已经将消息传至iframe, 打印消息没问题,但触发点击某个元素,还是会提示跨域的问题。
szzxc
发表于 2024-9-29 09:38:30
cxxjackie 发表于 2024-9-26 23:11
没太看懂你的描述,C页面又是干嘛的?如果想在A页面触发B页面的功能,要先监听A页面的点击,然后向B页面 ...
B页已经通过油猴iframe嵌入的A页面中,在A页中操作,实际想B页面。现在可以通过参数传到B页面,但B页面的模拟点击操作实现不了。仍然提示跨域问题,
szzxc
发表于 2024-9-29 10:45:33
cxxjackie 发表于 2024-9-27 22:13
你把A和B理解成2个脚本,只是写在一起了,环境是不互通的,通过location.href可以判断当前是哪个页面(或 ...
// ==UserScript==
// @name 跨域交互
// @description...
// @namespace ...
// @author ...
// @version 1.0
// @match https://www.baidu.com/*
// @match https://www.sogou.com/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
if (location.href.includes('baidu')) {
const iframe = document.createElement('iframe');
iframe.src = 'https://www.sogou.com/';
iframe.id = 'aabbcc';
//iframe.style.display = 'none';
iframe.style.width = '100%'; // 根据需要调整宽度
iframe.style.height = '600px'; // 根据需要调整高度
document.body.appendChild(iframe);
window.addEventListener('message', e => {
if (e.data.magic === true) {
// document.body.innerHTML = 'Magic!';
console.log('操作测试');
}
});
}
if (location.href.includes('sogou')) {
window.top.postMessage({
magic: true
}, 'https://www.baidu.com');
}
})();
我想在BAIDU页面上嵌入https://www.sogou.com, 嵌入后,在百度搜索栏上填写13800138000,点击搜索时,自动把13800138000也填写到SOGOU的搜索页面,同时点搜索。
cxxjackie
发表于 2024-9-29 22:32:44
szzxc 发表于 2024-9-29 10:45
// ==UserScript==
// @name 跨域交互
// @description...
你这个例子不太好,点击搜索后页面会发生刷新,连带着iframe也被刷掉了,导致交互效果看不出来,我给改成新标签页了,跟iframe原理一致:
```js
// ==UserScript==
// @name 跨域交互
// @description...
// @namespace ...
// @author ...
// @version 1.0
// @match https://www.baidu.com/*
// @match https://www.sogou.com/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
if (location.href.includes('baidu')) {
window.open('https://www.sogou.com/');
window.addEventListener('message', e => {
if (e.data.loaded) {
console.log('搜狗已加载。');
document.querySelector('input#su').addEventListener('click', () => {
e.source.postMessage({
search: true,
value: document.querySelector('input#kw').value
}, 'https://www.sogou.com');
});
}
});
}
if (location.href.includes('sogou')) {
window.opener.postMessage({
loaded: true
}, 'https://www.baidu.com');
window.addEventListener('message', e => {
if (e.data.search) {
document.querySelector('input#query').value = e.data.value;
document.querySelector('input#stb').click();
}
});
}
})();
```
提示跨域肯定是因为你在百度作用域下试图操作搜狗的元素了,注意上下两段分别是不同的作用域,你可以理解为2个脚本在交互。