js 打开新窗口 修改 窗口大小
生活随笔
收集整理的這篇文章主要介紹了
js 打开新窗口 修改 窗口大小
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原文鏈接: js 打開新窗口 修改 窗口大小
上一篇: Hibernate5 配置C3P0連接池
下一篇: VirtualBox 安裝 以及 安裝Ubuntu虛擬機
效果
只能設(shè)置通過open打開的窗口大小
從 Firefox 7 開始，不能改變?yōu)g覽器窗口的大小了，要依據(jù)下面的規(guī)則：
1.不能設(shè)置那些不是通過 window.open 創(chuàng)建的窗口或 Tab 的大小。
2 .當一個窗口里面含有一個以上的 Tab 時，無法設(shè)置窗口的大小。
也就是可用resizeTo或者resizeBy改變窗口大小的只是那些用window.open打開的頁面，并且window.open打開的窗口只能有一個tab
打開新窗口
<!-- 打開新窗口并設(shè)置初始大小 --> <button onclick='open("tt.html","","width=200,height=500")'>chrome打開瀏覽器 </button>
設(shè)置大小
<!-- 設(shè)置新打開的窗口大小 --> <button onclick="window.resizeTo(200,200)">設(shè)置大小 </button>
可以設(shè)置位置，獲取顯示器寬高，計算出放置的窗口位置
function open_window(width, hight) {let w = screen.width;let h = screen.height;let left = (w - width) / 2let top = (h - hight) / 2open("tt.html", "", `width=200,height=500,left=${left},top=${top}`)}
js 獲取 長度
網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.clientWidth 網(wǎng)頁可見區(qū)域高：document.body.clientHeight 網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.offsetWidth (包括邊線的寬) 網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬) 網(wǎng)頁正文全文寬：document.body.scrollWidth 網(wǎng)頁正文全文高：document.body.scrollHeight 網(wǎng)頁被卷去的高：document.body.scrollTop 網(wǎng)頁被卷去的左：document.body.scrollLeft 網(wǎng)頁正文部分上：window.screenTop 網(wǎng)頁正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的寬：window.screen.width 屏幕可用工作區(qū)高度：window.screen.availHeight 屏幕可用工作區(qū)寬度：window.screen.availWidth HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 獲取對象的滾動高度。 scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離 scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 scrollWidth:獲取對象的滾動寬度 offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度 offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置 offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 event.clientX 相對文檔的水平座標 event.clientY 相對文檔的垂直座標 event.offsetX 相對容器的水平坐標 event.offsetY 相對容器的垂直坐標 document.documentElement.scrollTop 垂直方向滾動的值 event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量 IE，FireFox 差異如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān)) 網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.clientWidth 網(wǎng)頁可見區(qū)域高： document.body.clientHeight 網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.offsetWidth (包括邊線的寬) 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高) 網(wǎng)頁正文全文寬： document.body.scrollWidth 網(wǎng)頁正文全文高： document.body.scrollHeight 網(wǎng)頁被卷去的高： document.body.scrollTop 網(wǎng)頁被卷去的左： document.body.scrollLeft 網(wǎng)頁正文部分上： window.screenTop 網(wǎng)頁正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的寬： window.screen.width 屏幕可用工作區(qū)高度： window.screen.availHeight 屏幕可用工作區(qū)寬度： window.screen.availWidth －－－－－－－－－－－－－－－－－－－ 技術(shù)要點 本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。 要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內(nèi)部對body進行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。 Window對象的innerWidth屬性包含當前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當前窗口的內(nèi)部高度。 Document對象的body屬性對應(yīng)HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點。 document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。實現(xiàn)代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>請調(diào)整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> </head> <body> <h2 align="center">請調(diào)整瀏覽器窗口大小</h2><hr> <form action="#" method="get" name="form1" id="form1"> <!--顯示瀏覽器窗口的實際尺寸--> 瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br> 瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br> </form> <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函數(shù)：獲取尺寸 { //獲取窗口寬度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //獲取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通過深入Document內(nèi)部對body進行檢測，獲取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //結(jié)果輸出至兩個文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //調(diào)用函數(shù)，獲取數(shù)值 window.onresize=findDimensions; //--> </script> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的js 打开新窗口 修改 窗口大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring源码解析（二）BeanDef
- 下一篇： cfe刷机教程 斐讯k3_PHICOMM