油猴脚本：网页显示增加一个iframe

最新推荐文章于 2024-09-19 11:02:45 发布

派圣

最新推荐文章于 2024-09-19 11:02:45 发布

阅读量873

点赞数 5

分类专栏：编程人生文章标签： html5 css css3

本文链接：https://blog.csdn.net/aimersong69/article/details/136290907

版权

编程人生专栏收录该内容

19 篇文章

订阅专栏

油猴脚本：网页显示增加一个iframe

概述

这个用户脚本旨在在网页上添加一个iframe，用于同时显示两个不同的网页。通过在用户脚本中添加自定义的iframe，用户可以在同一个页面上方便地查看多个网页内容。

原理

用户脚本通过使用JavaScript创建一个包含iframe的div元素，并将其添加到页面中。iframe元素被设置为显示另一个指定网页的内容。这样，用户可以在主页面上同时查看两个网页的内容。

功能

在页面上添加一个固定位置的iframe，用于显示另一个网页的内容
可以自定义iframe的样式和显示位置
通过修改iframe的src属性，可以显示不同的网页内容
通过键盘事件检测，可以提醒用户不要在控制台中操作

使用方法

安装用户脚本管理插件，如Tampermonkey
复制上述代码并粘贴到用户脚本管理插件的新脚本中
根据需要修改@match注释下的网站匹配规则和iframe的src属性
保存并启用脚本，刷新页面即可看到效果

通过这个用户脚本，用户可以更加方便地在同一个页面上查看多个网页的内容，提高浏览效率和便利性。

// ==UserScript==
// @name         网页显示增加iframe
// @namespace    http://your.namespace
// @version      0.1
// @description  一个页面两个网页
// @author       You
// @match        响应网站
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    const previewFrame = document.createElement('div');
    previewFrame.style.position = 'fixed';
    previewFrame.style.top = '0';
    previewFrame.style.left = '0';
    previewFrame.style.width = '25%';
    previewFrame.style.height = '100%';
    previewFrame.style.background = 'rgba(255, 255, 255, 0.9)';
    previewFrame.style.borderRight = '1px solid #ccc';
    previewFrame.style.overflow = 'auto';
    const iframe = document.createElement('iframe');
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.src = '需要增加的网页页面';
    previewFrame.appendChild(iframe);
    document.body.appendChild(previewFrame);
    GM_addStyle(`
        body {
            margin-left: 30%;
        }
    `);
    window.addEventListener('load', function() {
        document.addEventListener('keydown', function(e) {
            if (e.key === 'F12') {
                console.error('真聪明 被你找到了控制台 请复制代码在下方后点击回车键');
            }
        });
    });
})();