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

爱意满满的作品展示区。

This topic created in 1226 days ago, the information mentioned may be changed or developed.

我是 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";
});

31 replies • 2023-10-11 14:13:35 +08:00

LavaC

Jan 11, 2023

你是懂平行视界的

kokdemo

Jan 11, 2023

你这个想法，让我想起了几年前我写的 chrome 插件 https://v2ex.com/t/291810 思路很像

wudicgi

Jan 11, 2023

试了一下，右侧都有导航栏，能看文字的区域有点窄
LZ 是用的带鱼屏吗？

mywaiting

Jan 11, 2023

悄悄告诉贴主，这段 JS 可以稍微处理一下插入到设置里面的 CSS 规则中~

相当于自己给自己 XSS~

于是就能随站欢快地使用了，不用打开 DX 控制台了~

2han9wen71an

Jan 11, 2023

@mywaiting 等一份代码

GG668v26Fd55CP5W

Jan 11, 2023

@mywaiting 真的假的，那个自定义 css 设置能插入 js ？

QUC062IzY3M1Y6dg

Jan 11, 2023

有点意思，还可以再优化一下，把列表处理处理

GG668v26Fd55CP5W

Jan 11, 2023

这个像某些以前很多管理后台用的方式，左侧是菜单，单击后内容在右侧的 iframe 打开，dedecms 就是这样。

ONEBOYS

Jan 11, 2023

可以收藏到书签，代码填在网址栏里，不过要在前面加个 javascript:

ONEBOYS

Jan 11, 2023

@wudicgi 我的 mac13 ，改 65%刚好

ONEBOYS

Jan 11, 2023

@shuxhan
document.querySelectorAll('a.topic-link').forEach(function(r_node) {
r_node.target = "iframe_splitview";
});

haozes

Jan 11, 2023

还真特么好用！

shakoon

Jan 11, 2023

嗯，有点二十年前上猫扑的感觉了

chestnutnull

Jan 11, 2023

建议楼主加到油猴.

greatghoul

Jan 11, 2023

猫扑即视感

Gnnbb

Jan 11, 2023

已加到油猴，真的牛。

Gnnbb

Jan 11, 2023

不过老哥有个问题就是，右边分出来的屏有一道竖线，是因为第二道屏又进行了分屏操作吗？
用 F12 看了一下这道竖线，应该就是第二屏又分了屏
<iframe name="iframe_splitview" style="z-index: 999; left: 50%; top: 0px; width: 50%; height: 100%; position: fixed;"></iframe>

moonkiller

Jan 11, 2023

怎么加油猴，蹲个现成猴子🐒

lyusantu

Jan 11, 2023

@moonkiller 直接油猴添加新脚本，粘进去就行

ijrou

Jan 11, 2023

能做成油猴脚本就好了

hertzry

Jan 11, 2023

牛！

hertzry

Jan 11, 2023

不过我喜欢在屏幕的一半开浏览器，竖着更方便。

yhrzpm

Jan 11, 2023

能做成油猴脚本就好了

hertzry

Jan 11, 2023

// ==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

Jan 11, 2023

@Xyg12133617 那应该是你在 iframe 里点击了 V2EX 的主页。

Macolor21

Jan 12, 2023 via iPhone

提个优化思路，右侧不用 iframe 多一点处理，用 dom ，a 标签加监听器，通过 id 检测是否存在来判断是否开启右侧。

右侧只拷贝内容的 dom 。

不知道能不能实现，主要是右侧除了内容部分，其他的没用且占空间

Great233

Jan 12, 2023

```
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

Jan 12, 2023

你是懂 iframe 的

v2yllhwa

Jan 12, 2023 via Android

分屏配上移动端布局，绝了。不知道 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

Jan 13, 2023

这个翻页怎么办。。。每次打开控制台有点麻烦

chauncychan

Oct 11, 2023

@wangshou89 有解决方案了吗？