Split Screen

Split Screen 是一个用来分屏的 bookmarklet 程序. 它经过 javascript 通讯协议实现^[1].

特色

• 使用 HTML5 <dialog> 元素实现
• 使用 GoogleChrome/dialog-polyfill 打了补丁, 以支持全部主要浏览器
• 仿照 ElementUI - Dialog 对话框 实现了样式

使用

1. 将如下 Split Screen 连接拖到浏览器书签收藏夹 (若是没法拖拽, 新建一个标签页存为书签, 而后修改其 URL 为 bookmarklet.js 源码)

Drag this to your favorites: Split Screen

2. 在任意打开的网站中点击该书签, 按 功能说明 操做便可

功能说明

• URL 部分用来键入两个须要打开的网址 (默认为当前网址)
• Direction 部分用来选择网页展现的方向 (水平 or 垂直, 默认为水平)
• 左键点击 X, Cancel, 灰色区域按钮, 或键入 Esc 返回当前网页, 不进行任何操做
• 左键点击 Confirm 按钮进行分屏操做 (该按钮默认聚焦)
• 刷新页面后恢复最初页面

改进方向或缺陷

• 一个标签页屡次分屏存在问题

• 不引入静态资源, 减小网络 IO

• 不使用 document.write(), 使用 DOM 操做代替

• 在浏览器新标签页没法使用

• 须要刷新页面才能还原最初的页面

• 性能优化

• <dialog> 元素在一些浏览器尚未实现 (尤为是老浏览器), 经过打补丁展现效果可能不一致

• 因为浏览器同源策略, 某些网页可能没法直接访问到, 好比 Google (一切以安全为第一要义)

代码

• dialog 源码

• bookmarklet.js 源码

  javascript:fetch('https://ayuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu.github.io/demos/dialog/index.html')
  .then((response) => response.text())
  .then((html) => {
      document.write(html);
      document.close();
  });

• Split Screen Demo

---

1. javascript 通讯协议 ↩︎