理解javascript中的瀏覽器視窗——視窗基本操作

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/08/17/5778646.html
-Advertisement-
Play Games

[1]視窗位置 [2]視窗大小 [3]打開視窗 [4]關閉視窗 ...


×
目錄
[1]視窗位置 [2]視窗大小 [3]打開視窗[4]關閉視窗

前面的話

　　BOM全稱是brower object model(瀏覽器對象模型)，主要用於管理視窗及視窗間的通訊，其核心對象是window。說視窗，可能並不准確。因為，有的瀏覽器視窗可能包含多個標簽頁，每個標簽頁都有自己的window對象。本文將詳細該內容

 

視窗位置

【1】獲取

　　瀏覽器(firefox不支持)提供了screenLeft和screenTop屬性，分別用於表示視窗相對於屏幕左邊和上邊的位置

　　在視窗最大化的情況下，運行下列代碼時，各個瀏覽器返回的值並不相同。chrome返回left:0;top:0。而IE則返回left:0;top:56(若有菜單欄，則返回left:0;top:78)，這是因為IE中保存的是從屏幕左邊和上邊到由window對象表示的頁面可見區域的距離。safari則由於自身的bug，返回left:-8;top:-8

//移動視窗，會有數值的變化
<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
    myDiv.innerHTML = 'left:' + window.screenLeft + ';top:' + window.screenTop;
})
myDiv.onclick = function(){
    clearInterval(timer);
}
</script>

　　screenX和screenY屬性(IE8-)也提供相同的視窗位置信息

　　[註意]screenLeft、screenTop、screenX和screenY都是只讀屬性，修改他們的值，並不會使得視窗發生移動

　　在視窗最大化的情況下，各個瀏覽器返回的值依然不相同。firefox返回left:-7;top:-7。chrome依然返回left:0;top:0。而IE9+不論是否顯示菜單欄始終返回left:-7;top:-7。safari則由於自身的bug，依然返回left:-8;top:-8

<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
    myDiv.innerHTML = 'left:' + window.screenX + ';top:' + window.screenY;
})
myDiv.onclick = function(){
    clearInterval(timer);
}
</script>

相容

　　獲取視窗位置的相容寫法如下

　　[註意]由於各瀏覽器的實現不同，無法在跨瀏覽器條件下取得精確坐標值

    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
    console.log(leftPos,topPos);

【2】移動

　　使用moveTo()和moveBy()方法可以將視窗精確移動到一個新位置，這兩個方法只有IE瀏覽器支持

　　moveTo()接收兩個參數，分別是新位置的x和y坐標值

<div id="myDiv">點擊此處</div>
<script>
//將視窗移動到(0,0)處
myDiv.onclick = function(){
    window.moveTo(0,100); 
}    
</script>

 　　moveBy()接收兩個參數，分別是水平和垂直方向上移動像素數

<div id="myDiv">點擊此處</div>
<script>
//將視窗向下移動100像素
myDiv.onclick = function(){
    window.moveBy(0,100); 
}   
</script>

 

視窗大小

【1】獲取

　　outerWidth和outerHeight屬性用於表示瀏覽器視窗本身的尺寸

　　[註意]IE8-瀏覽器不支持

//chrome返回outerWidth:1920;outerHeight:1030
//IE9+和firefox返回outerWidth:1550;outerHeight:838 
//safari返回outerWidth:1552;outerHeight:840
document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight

　　innerWidth和innerHeight屬性用於表示頁面大小，實際上等於瀏覽器視窗尺寸大小減去瀏覽器自身邊框及菜單欄、地址欄、狀態欄等的寬度

　　[註意]由於<iframe>本身也有window屬性，如果頁面中存在框架，那麼框架中的innerWidth和innerHeight屬性指的是框架本身的innerWidth和innerHeight屬性

//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764
document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight

　　DOM中的document.documentElement.clientWidth和document.documentElement.clientHeight也可以表示頁面大小，與innerWidth和innerHeight返回相同的值

　　[註意]類似地，如果訪問框架，這兩個屬性也指向框架的屬性

//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764    
document.body.innerHTML = 'clientWidth:' + document.documentElement.clientWidth + ';clientHeight:' + document.documentElement.clientHeight

　　雖然這兩類屬性在電腦端表示同樣的值，在移動端卻有不同的用途。innerWidth和innerHeight表示的是視覺視口，即用戶正在看到的網站的區域；而document.documentElement.clientWidth和clientHeight表示的是佈局視口，指CSS佈局的尺寸。詳細情況移步至此

【2】調整

　　使用resizeTo()和resizeBy()這兩個方法可以用來調整瀏覽器視窗的大小 

　　[註意]只有IE和safari瀏覽器支持

　　resizeTo()接收兩個參數：瀏覽器視窗的新寬度和新高度

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    //將瀏覽器視窗大小調整到200,200
    window.resizeTo(200,200);
}
</script>

　　resizeBy()接收兩個參數：瀏覽器新視窗與原視窗的寬度和高度之差

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    //將瀏覽器視窗寬度減小100
    window.resizeBy(-100,0);
}
</script>

 

打開視窗

　　window.open()方法可以導航到一個特定的URL，也可以打開一個新的瀏覽器視窗。這個方法接收4個參數：要載入的URL、視窗目標、一個特性字元串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布爾值

參數

　　【1】通常只需要傳遞第一個參數，預設在新視窗打開

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    window.open("http://baidu.com");
}
</script>

　　【2】第二個參數表示已有視窗或者框架的名稱，或者是_self、_parent、_top、_blank等視窗打開方式

　　[註意]關於視窗打開方式詳細情況移步至此

<div id="myDiv">點擊此處</div>
<script>
//在當前視窗打開
myDiv.onclick = function(){
    window.open("http://baidu.com",'_self');
}
</script>

　　【3】第三個參數是一個逗號分隔的設置字元串，表示在新視窗中都顯示哪些特性

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    //在新視窗中打開高度為500，寬度為500，縱坐標為0，橫坐標為200的qq網頁
    window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
} 
</script>

　　【4】第四個參數只在第二個參數命名的是一個存在的視窗時才有用。它是一個布爾值，聲明瞭由第一個參數指定的URL是應用替換掉視窗瀏覽歷史的當前條目(true)，還是應該在視窗瀏覽歷史中創建一個新的條目(false)，後者是預設的設置

返回值

　　open()方法的返回值是新視窗的Window對象

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    var w = window.open();
    w.document.body.innerHTML = '測試文字';
}
</script>

　　新創建的window對象有一個opener屬性，其中保存著打開它的原始視窗對象

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    var w = window.open();
    console.log(w.opener === window);//true
}
</script>

過濾

　　大部分瀏覽器都有彈出視窗過濾系統。通常，open()方法只有當用戶手動單擊按鈕或者鏈接的時候才會 調用。javascript代碼嘗試在瀏覽器初始載入時開啟一個彈出視窗時，通常會失敗。如果被攔截，則返回值是undefined

<div id="myDiv">點擊此處</div>
<script>
var w = window.open();
console.log(w);//undefined
</script>

 

視窗關閉

　　就像方法open()打開一個新視窗一樣，方法close()將關閉一個視窗。如果已經創建了 Window對象w，可以使用如下的代碼將它關掉

<div>
    <span id="span1">打開視窗</span>
    <span id="span2">關閉視窗</span>    
</div>
<script>
var w;
span1.onclick = function(){
    w = window.open();
}
span2.onclick = function(){
    if(w){
        w.close();
    }
}
</script>

　　新視窗的對象w還有一個closed屬性，用於檢測是否被關閉

<div id="myDiv">點擊此處</div>
<script>
//先顯示false，1s後顯示true
myDiv.onclick = function(){
    var w = window.open();
    console.log(w.closed);//false
    setTimeout(function(){
        w.close();
        console.log(w.closed);//true
    },1000);
    
}
</script>

小應用

　　通過window.open()返回的對象可以操作新打開視窗的開閉

<div id="myDiv">打開視窗</div>
<script>
    var w = null;
    myDiv.onclick = function(){
        //如果w不存在，即沒有打開新視窗，或新視窗被關閉
        if(!w){
            w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
            myDiv.innerHTML = '關閉視窗';
        //如果w存在，說明新視窗被打開
        }else{
            w.close();
            w = null;
            myDiv.innerHTML = '打開視窗';
        }
    }
</script>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 給li設置float浮動屬性之後，無法撐開外層ul的問題。
    最近在項目中有好幾次遇到這個問題，感覺是浮動引起的，雖然用<div style="clear:both"></div>解決了，但自己不是特別明白，又在網上查了相關內容，是因為給li設置了浮動之後它就脫離當前正常的文檔流，所以沒辦法撐開外層ul的高度。 以下麵代碼為例，其實有好幾種解決方法，我用的這種 ...
  • 圖片跟著滑鼠動js
    <!DOCTYPE html><html><head> <title>duisgf</title> <meta charset="utf-8"><style type="text/css"> #image{ position: relative; left: 0px; top: 0px; }</st ...
  • 那些年我們一起過的JS閉包，作用域，this，讓我們一起划上完美的句號。
    之前有寫過閉包，作用域，this方面的文章，但現在想想當時寫的真是廢話太多了，以至於繞來繞去的，讓新手反而更難理解了，所以就有了此篇文章，也好和閉包，作用域，this告一段落。 第一個問題：什麼是閉包？ 我不想回答這個問題，但是我可以告訴你的是閉包可以解決函數外部無法訪問函數內部變數的問題。下麵是一 ...
  • 理解javascript中的對話框
    [1]定義 [2]alert [3]confirm [4]prompt [5]print ...
  • localStorage 雜記
    localStorage html5標準 Web 存儲現在的主流瀏覽器，包括IE 8+、Chrome 4+、Firefox 3.5+、Opera 10.5+、Safari 4+、iPhone 2+、Android 2+等，都支持localStorage本地存儲功能。 localStorage沒有時間 ...
  • jquery 全選 全部選 反選
    1.概述 在項目中經常遇到列表中對覆選框進行勾選操作，全選。。。反選。。 2. example ...
  • webpack和webpack-dev-server的區別
    第一： webpack只是構建 webpack-dev-server除了構建，還提供web服務 第二：webpack.config.json的路徑參數 顯然，entry都一樣，因為都要知道需要構建的文件在哪裡 那麼區別就在於 output了 path和webpack一起，指明構建 之後 輸出文件的位 ...
  • Nodejs學習總結 -Express入門（一）
    Express是基於Node.js平臺開發的Web應用開發框架，下麵我們入手學習。 官網 ： http://www.expressjs.com.cn/ github:https://github.com/expressjs/express Express生成器 1、生成express全局指令npm ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類