曲線救國實現頁面的分屏跳轉（顯示）

需求定義：

首先你擁有至少兩臺顯示器，在谷歌瀏覽器下，想要實現從第一個顯示器點擊按鈕，在另外一個顯示器上顯示新頁面。

 

預研過程

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);

 來移動一個已經存在的頁面。

 

至此，一個分屏的小功能插件實現完畢。