[油猴开发指南]关于脚本如何处理iframe的碎碎念

gues1688

感谢C大，让我理解了如何跨域拦截广告元素。
发现了一个技巧：当主页面成功接收到 frame 发来的消息后，在主页面就可以处理 iframe 了，也就是变成跟同源 iframe 一样了。

szzxc

是不是写个例子参考一下，
例如有一个页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

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

如何 向B页面发消息，B页面收到消息以后自己触发自己页面内的功能， 监听A页面这个可以，怎么传递B, 并执行B页面上的操作呢？ 实上要执行是C页面上，不过因为要进C，首次必须一定要先跳转B页面。才可以到C。

szzxc

另外：不显示iframe用 style.display = 'none' 更方便。 用这个还能操作页面iframe里面的元素么？

cxxjackie

szzxc 发表于 2024-9-27 09:06
如何 向B页面发消息，B页面收到消息以后自己触发自己页面内的功能， 监听A页面这个可以，怎么传递B, 并执行 ...

你把A和B理解成2个脚本，只是写在一起了，环境是不互通的，通过location.href可以判断当前是哪个页面（或者说哪个脚本），A脚本监听到点击后传递给B（随便传什么东西只要能理解是被点击了），B脚本接收到消息后执行自己的操作，具体可以看我那个百度和b站交互的例子。

隐藏后应该是能正常触发的，具体要看你触发的是什么操作。

szzxc

cxxjackie 发表于 2024-9-26 23:11
没太看懂你的描述，C页面又是干嘛的？如果想在A页面触发B页面的功能，要先监听A页面的点击，然后向B页面 ...

利用postMessage 已经将消息传至iframe, 打印消息没问题，但触发点击某个元素，还是会提示跨域的问题。

szzxc

cxxjackie 发表于 2024-9-26 23:11
没太看懂你的描述，C页面又是干嘛的？如果想在A页面触发B页面的功能，要先监听A页面的点击，然后向B页面 ...

B页已经通过油猴iframe嵌入的A页面中，在A页中操作，实际想B页面。现在可以通过参数传到B页面，但B页面的模拟点击操作实现不了。仍然提示跨域问题，

szzxc

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

szzxc 发表于 2024-9-29 10:45

// ==UserScript==
// @name 跨域交互
// @description ...

你这个例子不太好，点击搜索后页面会发生刷新，连带着iframe也被刷掉了，导致交互效果看不出来，我给改成新标签页了，跟iframe原理一致：

// ==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个脚本在交互。