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个脚本在交互。
页: 1 2 3 [4] 5
查看完整版本: [油猴开发指南]关于脚本如何处理iframe的碎碎念