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

特点

使用

  1. 将以下 Split Screen 链接拖到浏览器书签栏.
Drag this to your favorites: Split Screen
  1. 在任意打开的网站中点击该书签, 按功能说明操作即可

![Split Screen 演示](https://images.cnblogs.com/cnblogs_com/ayuuuuuu/1808482/o_200723125712splite screen.gif)

功能说明

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

改进方向或缺陷

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

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

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

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

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

  • 性能优化

  • <dialog> 元素在一些浏览器还没有实现 (尤其是老浏览器), 通过打补丁展示效果可能不一致

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

代码

  • dialog 源码

  • bookmarklet.js 源码

    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 通信协议

Split Screen的更多相关文章

  1. iOS 9 学习系列:Split Screen Multitasking

    http://www.cocoachina.com/ios/20151010/13601.html iOS 9 的一个重大变化就是增加了多任务,这个多任务允许用户在屏幕上同时运行多个 app.有两种形 ...

  2. ubuntu Screen 的比较详细的命令

    Linux Screen Commands For Developers 转自:http://fosshelp.blogspot.com/2014/02/linux-screen-commands-f ...

  3. man screen

    http://www.gnu.org/software/screen/manual/screen.html Screen User's Manual Next: Overview, Previous: ...

  4. vim编辑指令(转)

    跳跃指令 类似于游览器中的<前进><后退>按钮  CTRL-] -> 跟着link/tag转入 (follow link/tag)  CTRL-o -> 回到上一次 ...

  5. Xcode 7在支持ipad的设备中需要支持分屏!

    http://sandy.int.ru/xcode/xcode7zaizhichiipaddeshebeizhongyaozhichifenping.html 在更新APP的时候发现ERROR ITM ...

  6. Git - Tutorial [Lars Vogel]

    From: http://www.vogella.com/tutorials/Git/article.html Git - Tutorial Lars Vogel Version 5.6 Copyri ...

  7. R语言绘图002-页面布局

    par().layout().split.screen()函数 1. par()函数的参数详解 函数par()可以用来设置或者获取图形参数,par()本身(括号中不写任何参数)返回当前的图形参数设置( ...

  8. Git - Tutorial官方【转】

    转自:http://www.vogella.com/tutorials/Git/article.html#git_rename_branch Lars Vogel Version 5.8 Copyri ...

  9. eclipse 分屏

    刚刚一直找不到eclipse分屏功能,查了下发现是可以的. 具体见:http://www.coderanch.com/t/101996/vc/Split-screen-editor-Eclipse E ...

随机推荐

  1. Redhat FreeIPA Server 安装服务端和客户端 (实验:VMware环境下)

    实验环境:windows7 + vmware 15 + redhat 71:准备2台虚拟机:      虚拟机VMnet8,Subnet IP:192.168.145.0      Redhat 7( ...

  2. 解决start.spring.io无法访问的情况

    将start.spring.io替换成下列网址 http://start.jetbrains.org.cn/ 或者----> 连接手机热点 因为绝大多数无法访问都是因为网络问题

  3. linux环境搭建单机kafka

    准备工作: jdk-8u191-linux-x64.rpm  |   zookeeper-3.4.6.tar.gz  |   kafka_2.11-2.2.0.tgz 对应的地址 zookeeper: ...

  4. linux下将多个ts文件合并为一个MP4文件

    1. 安装ffmpeg工具 sudo apt install ffmpeg 2. 确保所有ts文件无损坏后,确保当前目录(即存放ts文件的目录)无txt文件及mp4文件,在存放ts文件的目录下建立te ...

  5. VC GDI+基础用法VC

    #include "GdiPlus.h" // 使用GDI+ 命名空间 using namespace Gdiplus; // 与GDI+ 相关的其它头文件,如:GraphicsP ...

  6. int与bigdecimal的相互转换

    int转bigdecimal BigDecimal number = new BigDecimal(0); int value=score; number=BigDecimal.valueOf((in ...

  7. 重学 Java 设计模式:实战观察者模式「模拟类似小客车指标摇号过程,监听消息通知用户中签场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 知道的越多不知道的就越多 编程开发这条路上的知识是无穷无尽的, ...

  8. pandas | 使用pandas进行数据处理——Series篇

    本文始发于个人公众号:TechFlow,原创不易,求个关注 上周我们关于Python中科学计算库Numpy的介绍就结束了,今天我们开始介绍一个新的常用的计算工具库,它就是大名鼎鼎的Pandas. Pa ...

  9. BZOJ 4055 Misc

    原题传送门 比较复杂的一道DP. 设两点(i,j)之间最短路为dis[i][j],则 可转化为: 将该式前后分立,可得: 其中,可以单独求出,后面的部分则需要DP. 设为b(x),枚举i,并计算出从i ...

  10. 安卓移动端line-height垂直居中出现偏移的原因,及解决方法

    目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的.出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的. 左图中的字号是12px,右图中的 ...