整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
