1. 程式人生 > >BOM:視窗位置、頁面視口大小、window.open

BOM:視窗位置、頁面視口大小、window.open

  1. 獲取視窗位置:
// 相容所有瀏覽器的寫法
 var leftPos = (typeof window.screenLeft === "number") ? window.screenLeft : window.screenX;
  var topPos = (typeof window.screenTop === "number") ? window.screenTop : window.screenY;
  console.log("leftPos:",leftPos,",topPos:",topPos);

2.獲取頁面視口大小:
因為存在瀏覽器相容性問題,故獲取瀏覽器視窗的大小做不到。現做獲取頁面視口大小的方法:

var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;
    if (typeof pageWidth !== "number") {
        if (document.compatMode === "CSS1Compat") { // 標準模式
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else
{ // 相容模式 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }

調整瀏覽器視窗的大小(注意:瀏覽器預設關閉此功能):

 window.resizeTo(100, 100);
    window.resizeBy(100, 100);

3.window.open
3.1.方法介紹:返回一個指向新視窗的引用,一共接受四個引數:要載入的URL,視窗目標(或者叫視窗名稱),一個特性字串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值。一般傳遞第一個引數即可。但是,第二個引數在實際使用中很有用,因為若傳遞了第二個引數,而且該引數是已有視窗或框架的名稱,那麼就會在具有該名稱的視窗或者框架中載入第一個引數指定的URL,而不會重新開啟一個視窗。若第二個引數並不是一個已經存在的視窗或框架,那麼該方法就會根據第三個引數的字串建立一個新視窗或新標籤頁。第四個引數只在不開啟新視窗的情況下使用。

var newWin = window.open("https://www.hao123.com/", "topFrame1", "height=200,width=400,left=200,top=100,location=no,menubar=yes,resizable=no,scroolbars=no,status=no,toolbar=yes");
    setTimeout(function() {
        console.log("opener:",newWin.opener === window);
        console.log("newWin:",newWin);
        newWin.close(); // 關閉後指向新視窗的引用依然存在
        console.log("newWin:",newWin);
        console.log("opener:",newWin.opener === window); // .opener屬性指向誰(指父視窗)開啟的新視窗
        //alert(newWin.closed);
        newWin.opener = null; // 當父視窗和子視窗間不需要進行通訊時,可以進行這樣的設定, 以前視窗間屬於非獨立程序,現在增加了此項設定後,屬於獨立程序,並且一旦設定不可逆
    }, 2000);

3.2.檢測彈出視窗是否被遮蔽

var blockedFlag = false;
    try {
        var newWin = window.open("http://www.baidu.com");
        if (!newWin) {
            blockedFlag = true;
        }
    } catch (ex) {
        blockedFlag = true;
    }
    if (blockedFlag) {
        alert("阻止了彈框!");
    }

解釋:視窗是否被遮蔽(分為瀏覽器內建的遮蔽程式阻止彈框;瀏覽器擴充套件或其他程式阻止的彈窗),若是瀏覽器內建的遮蔽程式阻止彈框,只需要根據window.open返回的引用是否為null或者為undefined即可檢測,若是其他程式阻止的,window.open則會報錯,此時用try catch捕獲(try catch:程式出錯,又想讓程式繼續往下執行)