需求定义:
首先你拥有至少两台显示器,在谷歌浏览器下,想要实现从第一个显示器点击按钮,在另外一个显示器上显示新页面。
预研过程
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);
来移动一个已经存在的页面。
至此,一个分屏的小功能插件实现完毕。