Split Screen

Split Screen 是一個用來分屏的 bookmarklet 程式. 它通過 javascript 通信協議實現^[1].

特點

• 使用 HTML5 <dialog> 元素實現
• 使用 GoogleChrome/dialog-polyfill 打了補丁, 以支持所有主要瀏覽器
• 仿照 ElementUI - Dialog 對話框 實現了樣式

使用

1. 將以下 Split Screen 鏈接拖到瀏覽器書簽收藏夾 (如果無法拖拽, 新建一個標簽頁存為書簽, 然後修改其 URL 為 bookmarklet.js 源碼)

2. 在任意打開的網站中點擊該書簽, 按 功能說明 操作即可

功能說明

• URL 部分用來鍵入兩個需要打開的網址 (預設為當前網址)
• Direction 部分用來選擇網頁展示的方向 (水平 or 垂直, 預設為水平)
• 左鍵點擊 X, Cancel, 灰色區域按鈕, 或鍵入 Esc 返回當前網頁, 不進行任何操作
• 左鍵點擊 Confirm 按鈕進行分屏操作 (該按鈕預設聚焦)
• 刷新頁面後恢復最初頁面

改進方向或缺陷

• 一個標簽頁多次分屏存在問題

• 不引入靜態資源, 減少網路 IO

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

• 在瀏覽器新標簽頁無法使用

• 需要刷新頁面才能還原最初的頁面, 應該隱藏在頁面邊緣, 隨時可以使用

• 性能優化

• 插件化 (Chorme & Firefox)

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