整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1），頂層窗口及底層窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="測試1" onclick="testFun()" />
</body>
<script type="text/javascript">
function testFun() {
// 當前窗口是否底層窗口
if(window.parent == window.self) {
alert("是底層窗口");
}
// 是否最頂層窗口
if(window.top != window.self) {
alert("不是最頂層窗口，當前窗口在一個框架中");
} else {
alert("是最頂層窗口");
}
}
</script>
</html>（2），框架集元素子窗口調用父窗口js方法及調用兄弟窗口（注意：頁面都是在同一個域）
lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />width=device-width 設置布局視口的寬度, device-width設備出廠的視口寬度
user-scalable=no 是否允許用戶縮放, 值為no或yes, no代表不允許, yes代表允許
initial-scale=1.0 設置頁面的初始縮放視口寬度為1.0倍
maximum-scale=1.0 允許用戶最大的縮放視口寬度為1.0倍
minimum-scale=1.0 允許用戶最小的縮放視口寬度為1.0倍
獲取可是窗口的寬度和高度?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--視口-->
<!--
視口寬度：設備寬度
是否允許用戶縮放：no
初始縮放比：1
最大縮放比：1
最小縮放比：1
-->
<meta name="viewport" content="width=device-width,user-scalable=no," />
</head>
<body>
<!--
視口
可視窗口
-->
<h1>小許的手機真奇葩竟然不是980</h1>
<p>你們感覺還好那我呢 </p>
<script type="text/javascript">
var w = document.documentElement.clientWidth || document.body.clientWidth;
alert(w)
</script>
</body>
</html>獲取屏幕的像素比和分辨率
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<script type="text/javascript">
//設備像素比=分辨率/設備真實的大小
var w = document.documentElement.clientWidth || document.body.clientWidth;
var dpr = window.devicePixelRatio; //屏幕的像素比
alert(w*dpr) //計算出屏幕的分辨率
//console.log(window.devicePixelRatio);//設備像素比
</script>
</body>
</html>devicePixelRatio屬性
該 Window 屬性 devicePixelRatio 能夠返回當前顯示設備的物理像素分辨率與 CSS 像素分辨率的比率
還原屏幕的分辨率
1），彈窗及參數說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打開新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow = window.open("newTest.html",
"彈到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 彈出新窗口的命令
(01) newTest.html 彈出窗口的文件名，或請求地址
(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側的像素值
(07) toolbar=no 是否顯示工具欄，yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動欄
(10) resizable=no 是否允許改變窗口大小，yes為允許
(11) location=no 是否顯示地址欄，yes為允許
(12) status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許
***/
</script>
</html>
（2），彈窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop = (window.screen.availHeight - 30 - 500) / 2;
var iLeft = (window.screen.availWidth - 10 - 800) / 2; //減width
var openWindow = window.open("newTest.html"
,"測試彈窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
（3），窗口 location屬性
window對象location屬性是引用Location對象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當前窗口顯示指定頁面
window.close(); //關閉本頁面（4），窗口與父窗口通信
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
