您的位置：首页 > 其它

Window - 浏览器对象模型

2015-10-20 21:56 381 查看

1.Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

函数是 window 对象的方法。

document.getElementById("header");

2.Window 尺寸

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

//IE不支持

document.documentElement.clientHeight

document.documentElement.clientWidth

//通用方法

3.其他 Window 方法

window.open("URL","name","样式") - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo(x,y) - 移动当前窗口到屏幕的(x,y)处

window.moveBy(x,y) - 移动当前窗口相对水平位置移动x，垂直移动y

window.resizeTo(x,y) - 调整当前窗口的宽度为x，高度为y

window.resizeBy(x,y) - 调整当前窗口的宽度x，高度 y

示例：

<script>

window.onlod = function() {

var btn = document.getElementById("btn");

var open = document.getElementById("open");

btn.onclick = function () {

window.moveBy(100,100);

};

btn.onclick = function () {

var jk = window.open("02.html","","width=200,height=100");

};

}

</script>

body>

<input type="button" value="点击" id="btn"/>

<input type="button" value="打开" id="open"/>

</body>

4.Screen对象

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

5.Location对象

location.href

document.write(location.href) //返回一个完整的URL:http://localhost:63342/js/js%E5%AF%B9%E8%B1%A1/window.html

location.hostname

document.write(location.hostname ); //返回 web 主机的域名:localhost

location.pathname

document.write(location.pathname);//返回当前页面的路径和文件名:/js/js%E5%AF%B9%E8%B1%A1/window.html

location.port

document.write(location.port ;//返回 web 主机的端口 :63342

location.assign（URL):

location.reload(true/false):true，从服务器载入新的文档

location.replace(new.URL):不能从浏览器历史中访问

6.history 对象

history.back() - 后退按钮 ==history.go(-1)

history.forward() - 前进按钮 ==history.go(1)

page1:

<script>

window.onload = function() {

var forward = document.getElementById("forward");

var length = document.getElementById("length");

forward.onclick = function() {

history.forward();

};

length.onclick = function() {

alert(history.length);

}

}

</script>

</head>

<body>

<a href="02.html">跳转到页面二</a>

<input type="button" value="前进" id="forward"/>

<input type="button" value="长度" id="length"/>

page2:

<script>

window.onload = function() {

var back = document.getElementById("back");

back.onclick = function() {

history.back();

}

}

</script>

</head>

<body>

<input type="button" value="后退" id="back"/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航