曲线救国实现页面的分屏跳转（显示）

需求定义：

首先你拥有至少两台显示器，在谷歌浏览器下，想要实现从第一个显示器点击按钮，在另外一个显示器上显示新页面。

 

预研过程

google了半天，到处都是通过window.open，设置参数实现需求，实测发现谷歌浏览器对参数的支持很不友好，不能实现此方法。

通过查找资料，发现各浏览器对window.open()的窗口特征sFeatures参数支持程度存在差异。

         open 方法属于 window 对象，他用来打开一个新浏览器窗口， 其中window 对象又隶属 BOM (Browser Object Model) 范畴。遗憾的是 BOM 还没有被标准化，它由各个浏览器厂商制定，因此会出现实差异。

时至今日，HTML5 规范草案中已经开始标准化 BOM，window 对象也在草案之中，草案中对 open 方法的形参数 window.open([ url [,target[,features[,replace]]]]) 做了简要列举与介绍。但是在讲到 features 时仅写着"该参数功能说明忽略"，具体参数功能尚不可知。

在可查找到的浏览器厂商官方 developer 站点中， 仅有 mozilla MDC 以及 micorsoft MSDN 写有对 open 方法 features 参数说明的。其中，MDC 介绍非常简洁，仅说明参数格式。

         以下粘自网上资源http://www.w3help.org/zh-cn/causes/BX1053#

 

解决方法

自己编写谷歌插件，调用谷歌插件的底层api，来实现需求，如何编写插件本文不赘述，主要代码如下：

1.监听你的主页面的按钮事件

首先通过修改manifest的

content_scripts

来向主页面引入js ，并监听预先设定的事件

function fpfun() {
  chrome.extension.sendMessage({ cmd: "createWindow", data:'yourdata' }, function(response) {});
};
window.addEventListener("load", function() {
  $("#mybutton").click(function(event) {
    fpfun();
  });
  $(".fpclass").click(function(event) {
    fpfun();
  });
});

 通过fpfun函数，向chrome监听发送请求。

2.获取显示器的参数（width，height，left，top）

a.通过修改manifest引入background文件。

b.添加chrome的事件监听

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
}

c.获取显示器参数信息

chrome.system.display.getInfo(function(displayInfoArray) {
      sendResponse({ 'data': JSON.stringify(displayInfoArray) });
    });

别忘了先开启system.diaplay权限。

 

3.建立一个新的页面/移动一个老的页面

通过调用

chrome.windows.create(windowParams);

来建立一个新页面，其中页面的参数由windowsParams控制，具体参数信息查看api，其中页面的宽高和偏移的取值，是通过上一步获取到的显示器信息进行判断。

通过调用

chrome.windows.update(windowParams);

 来移动一个已经存在的页面。

 

至此，一个分屏的小功能插件实现完毕。