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

2023-01-11 15:15:31 +08:00
 tool2d
我是 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";
});

4118 次点击
所在节点    分享创造
31 条回复
hertzry
2023-01-11 19:06:28 +08:00
牛!

hertzry
2023-01-11 19:12:01 +08:00
不过我喜欢在屏幕的一半开浏览器,竖着更方便。

yhrzpm
2023-01-11 19:12:12 +08:00
能做成油猴脚本就好了
hertzry
2023-01-11 19:22:37 +08:00
// ==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
2023-01-11 19:23:16 +08:00
@Xyg12133617 那应该是你在 iframe 里点击了 V2EX 的主页。
Macolor21
2023-01-12 09:05:12 +08:00
提个优化思路,右侧 不用 iframe 多一点处理,用 dom ,a 标签加监听器,通过 id 检测是否存在来判断是否开启右侧。

右侧只拷贝内容的 dom 。

不知道能不能实现,主要是右侧除了内容部分,其他的没用且占空间
Great233
2023-01-12 11:29:17 +08:00
```
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
2023-01-12 13:44:19 +08:00
你是懂 iframe 的
v2yllhwa
2023-01-12 18:16:29 +08:00
分屏配上移动端布局,绝了。不知道 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
2023-01-13 15:07:58 +08:00
这个翻页怎么办。。。每次打开控制台有点麻烦
chauncychan
218 天前
@wangshou89 有解决方案了吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/908164

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX