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

szzxc

cxxjackie 发表于 2024-9-29 22:32
[md]你这个例子不太好，点击搜索后页面会发生刷新，连带着iframe也被刷掉了，导致交互效果看不出来，我给 ...

打两个页面应该是没有问题，相当于油猴把执行代码注入sogou页面内，但是如果一个页面，嵌入另外一个页面，似乎不行。

那如何修改为输入13800138000，点击百度搜索，不实际执行百度的搜索（实际为不刷新影响嵌入的页面）。实际将参数到sogou的输入框后点击搜索。 主要是sogou执行操作（在不打开新标签页面的情况下），我最终目的，也跨域页面执行操作。

szzxc

if (location.href.includes('sogou')   if (location.href.includes('baidu'))  这个两判断有什么用？ 一般来说，sogou不是嵌入的吗，document.querySelector('input#query').value 这个路径应该获取不到值， document.querySelector('input#stb').click(); 这个也不能操作吧。

cxxjackie

szzxc 发表于 2024-9-30 11:53

if (location.href.includes('sogou') if (location.href.includes('baidu')) 这个两判断有什么用？ 一 ...

本质上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')) {
        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.loaded) {
                console.log('搜狗已加载。');
                document.querySelector('input#su').addEventListener('click', e2 => {
                    e2.preventDefault();
                    e2.stopImmediatePropagation();
                    e.source.postMessage({
                        search: true,
                        value: document.querySelector('input#kw').value
                    }, 'https://www.sogou.com');
                }, true);

            }
        });
    }
    if (location.href.includes('sogou')) {
        window.top.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();
            }
        });
    }
})();

你对iframe的理解似乎有点问题，iframe被嵌入后视作一个新页面，与原页面隔离，脚本也会注入一个新的实例在这个iframe页面内，此时location.href会变成iframe.src，所以判断location.href可以区分当前在主页面还是iframe作用域下，也就是说，上下两段代码每次只有一段会生效，这就是为什么我多次强调，你要把他看作2个脚本，主页面的脚本做主页面的事，iframe的脚本做iframe的事，postMessage起一个传递信息的作用。

szzxc

本帖最后由 szzxc 于 2024-10-8 16:45 编辑

本帖最后由 szzxc 于 2024-10-8 15:32 编辑

本帖最后由 szzxc 于 2024-10-8 15:14 编辑

本帖最后由 szzxc 于 2024-10-8 14:59 编辑

本质上iframe也是一个新页面，原理是完全一样的：

如果嵌套的网页是本来跨域的iframe ，要如何操作？

cxxjackie

szzxc 发表于 2024-10-8 14:54
[md]> 本帖最后由 szzxc 于 2024-10-8 15:32 编辑

> 本帖最后由 szzxc 于 2024-10-8 15:14 编辑

我例子里不是已经写了吗？百度和搜狗就是跨域的呀，最后那段代码已经改成iframe了。

szzxc

cxxjackie 发表于 2024-10-8 22:03
我例子里不是已经写了吗？百度和搜狗就是跨域的呀，最后那段代码已经改成iframe了。 ...

嗯。已经改好了。真是套中套，一层套一层，每一层都是跨域的。直接改到最后一层好像也可以。现在又遇到一个问题，不过不是iframe的问题了。