V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tool2d
V2EX  ›  分享创造

分屏浏览 V2EX,只需要两步。

  •  
  •   tool2d · 79 天前 · 3377 次点击
    这是一个创建于 79 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是 V2 重度用户,每次浏览帖子要打开一堆 TAB ,感觉好烦。其实靠分屏,一个 TAB 就可以解决所有问题。

    第一步,创建一个 iframe ,起一个名字,追加到当前的 document 里。
    第二步,遍历所有 A 标签,把打开目标改成 iframe 的名字。

    把下面的 JS 代码,复制到 Chrome 控制台运行即可。(我个人是绑定在快捷键上运行 JS )

    var iframeobj = document.createElement('iframe');
    iframeobj.name = 'iframe_splitview';
    iframeobj.style.zIndex = 999;
    iframeobj.style.left = '50%';
    iframeobj.style.top = 0;
    iframeobj.style.width = '50%';
    iframeobj.style.height = '100%';
    iframeobj.style.position = 'fixed';
    document.body.style.marginRight = '50%';
    document.body.appendChild(iframeobj);

    document.querySelectorAll('a').forEach(function(r_node) {
    r_node.target = "iframe_splitview";
    });

    30 条回复    2023-01-13 15:07:58 +08:00
    LavaC
        1
    LavaC  
       79 天前   ❤️ 2
    你是懂平行视界的
    kokdemo
        2
    kokdemo  
       79 天前
    你这个想法,让我想起了几年前我写的 chrome 插件 https://v2ex.com/t/291810 思路很像
    wudicgi
        3
    wudicgi  
       79 天前
    试了一下,右侧都有导航栏,能看文字的区域有点窄
    LZ 是用的带鱼屏吗?
    mywaiting
        4
    mywaiting  
       79 天前
    悄悄告诉贴主,这段 JS 可以稍微处理一下插入到设置里面的 CSS 规则中~

    相当于自己给自己 XSS~

    于是就能随站欢快地使用了,不用打开 DX 控制台了~
    2han9wen71an
        5
    2han9wen71an  
       79 天前
    @mywaiting 等一份代码
    falcon05
        6
    falcon05  
       79 天前
    @mywaiting 真的假的,那个自定义 css 设置能插入 js ?
    shuxhan
        7
    shuxhan  
       79 天前
    有点意思,还可以再优化一下,把列表处理处理
    falcon05
        8
    falcon05  
       79 天前
    这个像某些以前很多管理后台用的方式,左侧是菜单,单击后内容在右侧的 iframe 打开,dedecms 就是这样。
    ONEBOYS
        9
    ONEBOYS  
       79 天前   ❤️ 1
    可以收藏到书签,代码填在网址栏里,不过要在前面加个 javascript:
    ONEBOYS
        10
    ONEBOYS  
       79 天前
    @wudicgi 我的 mac13 ,改 65%刚好
    ONEBOYS
        11
    ONEBOYS  
       79 天前   ❤️ 1
    @shuxhan
    document.querySelectorAll('a.topic-link').forEach(function(r_node) {
    r_node.target = "iframe_splitview";
    });
    haozes
        12
    haozes  
       79 天前
    还真特么好用!
    shakoon
        13
    shakoon  
       79 天前
    嗯,有点二十年前上猫扑的感觉了
    chestnutnull
        14
    chestnutnull  
       79 天前   ❤️ 1
    建议楼主加到油猴.
    greatghoul
        15
    greatghoul  
       79 天前
    猫扑即视感
    Xyg12133617
        16
    Xyg12133617  
       79 天前
    已加到油猴,真的牛。
    Xyg12133617
        17
    Xyg12133617  
       79 天前
    不过老哥有个问题就是,右边分出来的屏有一道竖线,是因为第二道屏又进行了分屏操作吗?
    用 F12 看了一下这道竖线,应该就是第二屏又分了屏
    <iframe name="iframe_splitview" style="z-index: 999; left: 50%; top: 0px; width: 50%; height: 100%; position: fixed;"></iframe>
    moonkiller
        18
    moonkiller  
       79 天前
    怎么加油猴,蹲个现成猴子🐒
    lyusantu
        19
    lyusantu  
       79 天前   ❤️ 1
    @moonkiller 直接油猴添加新脚本,粘进去就行
    ijrou
        20
    ijrou  
       79 天前
    能做成油猴脚本就好了
    hertzry
        21
    hertzry  
       79 天前
    牛!

    hertzry
        22
    hertzry  
       79 天前
    不过我喜欢在屏幕的一半开浏览器,竖着更方便。

    yhrzpm
        23
    yhrzpm  
       79 天前
    能做成油猴脚本就好了
    hertzry
        24
    hertzry  
       79 天前   ❤️ 2
    // ==UserScript==
    // @name New Userscript
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description try to take over the world!
    // @author You
    // @match https://v2ex.com/
    // @icon https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
    // @grant none
    // ==/UserScript==

    (function() {
    'use strict';

    // Your code here...
    var iframeobj = document.createElement('iframe');
    iframeobj.name = 'iframe_splitview';
    iframeobj.style.zIndex = 999;
    iframeobj.style.left = '50%';
    iframeobj.style.top = 0;
    iframeobj.style.width = '50%';
    iframeobj.style.height = '100%';
    iframeobj.style.position = 'fixed';
    document.body.style.marginRight = '50%';
    document.body.appendChild(iframeobj);

    document.querySelectorAll('a').forEach(function(r_node) {
    r_node.target = "iframe_splitview";
    });
    })();
    hertzry
        25
    hertzry  
       79 天前
    @Xyg12133617 那应该是你在 iframe 里点击了 V2EX 的主页。
    Macolor21
        26
    Macolor21  
       79 天前 via iPhone
    提个优化思路,右侧 不用 iframe 多一点处理,用 dom ,a 标签加监听器,通过 id 检测是否存在来判断是否开启右侧。

    右侧只拷贝内容的 dom 。

    不知道能不能实现,主要是右侧除了内容部分,其他的没用且占空间
    Great233
        27
    Great233  
       78 天前   ❤️ 1
    ```
    document.querySelector('#Main>.box').addEventListener('click', (e) => {
    const el = e.target;
    if (el.tagName.toLowerCase() == 'a' && el.className.indexOf('topic-link') >= 0) {
    let iframe = document.querySelector('iframe[name=topic-innerview]');
    if (iframe) {
    iframe.remove();
    iframe = iframe.cloneNode();
    } else {
    iframe = document.createElement('iframe');
    iframe.name = 'topic-innerview';
    iframe.style.width = '100%';
    iframe.style.height = `calc(100vh - ${el.offsetHeight}px)`;
    }
    const parent = el.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
    parent.scrollIntoView();
    const nextTopic = parent.nextElementSibling;
    nextTopic.parentElement.insertBefore(iframe, nextTopic);
    el.target = 'topic-innerview';
    iframe.onload = () => {
    iframe.contentWindow.document.body.style.width = '100%';
    iframe.contentWindow.document.body.style.minWidth = '100%';
    iframe.contentWindow.document.body.innerHTML = iframe.contentWindow.document.querySelector('#Main').outerHTML;
    iframe.contentWindow.document.querySelector('#Main').style.marginRight = 0;
    }
    }
    });
    ```
    iframe 放在被点击话题下面?
    wuxidixi
        28
    wuxidixi  
       78 天前
    你是懂 iframe 的
    v2yllhwa
        29
    v2yllhwa  
       78 天前 via Android   ❤️ 1
    分屏配上移动端布局,绝了。不知道 v2 有没有手动设置 PC 是移动端布局的方式,我是插件实现的。
    ![screenshot.png]( https://s2.loli.net/2023/01/12/C4raPk7RQVEWAt1.png)

    // ==UserScript==
    // @name V2EX 优化
    // @namespace https://www.v2ex.com/
    // @version 0.1
    // @description 分屏 v2ex!
    // @author You
    // @match https://v2ex.com/
    // @match https://www.v2ex.com/
    // @match https://v2ex.com/t/*
    // @match https://www.v2ex.com/t/*
    // @icon https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
    // @grant none
    // @run-at document-end
    // ==/UserScript==

    (function () {
    "use strict";
    let url = window.location.href;
    let is_index = url.indexOf("/t/") === -1;
    if (is_index) {
    if (window.self === window.top) {
    document.write(
    `
    <html>
    <head>
    <script>
    var iframe_open_url = function (url) {
    document.getElementById('iframe_splitview').src = url;
    let current_url = window.location.href;
    history.replaceState({},"",url);
    history.replaceState({},"",current_url);
    }
    </script>
    </head>
    <frameset cols='50%, 50%'>
    <frame src='${location.href}'>
    <frame src='' id='iframe_splitview'>
    </frameset >
    </html>
    `
    );
    } else {
    document.body.style.minWidth = "unset";
    let nodes = document.querySelectorAll(".item_title");
    for (let i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener("click", function (e) {
    e.preventDefault();
    let url = nodes[i].getElementsByClassName("topic-link")[0].href;
    window.parent.iframe_open_url(url);
    });
    }
    }
    } else {
    if (window.self !== window.top) {
    document.body.style.minWidth = "unset";
    }
    }
    })();
    wangshou89
        30
    wangshou89  
       77 天前
    这个翻页怎么办。。。每次打开控制台有点麻烦
    关于   ·   帮助文档   ·   博客   ·   nftychat   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   2292 人在线   最高记录 5556   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 1286ms · UTC 02:34 · PVG 10:34 · LAX 19:34 · JFK 22:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.