上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖
楼主: cxxjackie - 

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

[复制链接]
  • TA的每日心情
    开心
    2024-11-3 00:29
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    3

    主题

    15

    回帖

    24

    积分

    助理工程师

    积分
    24
    发表于 2024-9-3 20:44:00 | 显示全部楼层

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

    回复
    订阅

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 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);

    但是好像不太好操作。能否给个例子参考一下
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 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' 更方便。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 2024-9-27 09:06:21 | 显示全部楼层
    如何 向B页面发消息,B页面收到消息以后自己触发自己页面内的功能, 监听A页面这个可以,怎么传递B, 并执行B页面上的操作呢? 实上要执行是C页面上,不过因为要进C,首次必须一定要先跳转B页面。才可以到C。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 2024-9-27 09:07:06 | 显示全部楼层
    另外:不显示iframe用 style.display = 'none' 更方便。 用这个还能操作页面iframe里面的元素么?
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 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站交互的例子。

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

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 2024-9-29 09:35:50 | 显示全部楼层
    cxxjackie 发表于 2024-9-26 23:11
    没太看懂你的描述,C页面又是干嘛的?如果想在A页面触发B页面的功能,要先监听A页面的点击,然后向B页面 ...

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

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 2024-9-29 09:38:30 | 显示全部楼层
    cxxjackie 发表于 2024-9-26 23:11
    没太看懂你的描述,C页面又是干嘛的?如果想在A页面触发B页面的功能,要先监听A页面的点击,然后向B页面 ...

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

    使用道具 举报

  • TA的每日心情
    开心
    2024-9-29 15:06
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    9

    主题

    81

    回帖

    88

    积分

    初级工程师

    积分
    88
    发表于 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的搜索页面,同时点搜索。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2024-9-29 22:32:44 | 显示全部楼层

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

    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表