JavaScript Window - 浏览器对象模型
小案例1:显示浏览器窗口的高度和宽度
- innerHeight / clientHeight 浏览器窗口的内部高度(包括滚动条)
- innerWidth / clientWidth 浏览器窗口的内部宽度(包括滚动条)
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
document.getElementById("demo").innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。";
</script>
小案例2:显示浏览器窗口的一些其他方法
- window.open(URL,name,features,replace) - 打开新窗口
参数 | 描述 |
---|---|
URL | 可选。声明了要在新窗口中显示的文档的 URL。值是空字符串,新窗口就不会显示任何文档。 |
name | 可选。该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。 |
features | 可选。声明了新窗口要显示的标准浏览器的特征。 |
replace
| 可选。
|
打开一个 200 * 100 的新窗口和指定窗口的方法:
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>这是我的窗口</p>");
}
function open_win() {
window.open("http://www.baidu.com.cn")
}
- window.close() - 关闭当前窗口
- window.moveTo(x,y) - 移动当前窗口
function moveWin(){
myWindow.moveTo(0,0);
myWindow.focus(); // 把键盘焦点给予一个窗口
}
- resizeTo(width,height) - 调整当前窗口的尺寸
参数 | 描述 |
---|---|
width | 必需。想要调整到的窗口的宽度。以像素计。 |
height | 可选。想要调整到的窗口的高度。以像素计。 |
function resizeWindow() {
window.resizeTo(500,300)
}
JavaScript Window Screen
属性 | 描述 |
screen.availWidth | 可用的屏幕宽度。属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。 |
screen.availHeight | 可用的屏幕高度。属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。 |
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
属性 | 描述 |
location.hostname | 返回 web 主机的域名。 |
location.pathname | 返回当前页面的路径和文件名。 |
location.port | 返回 web 主机的端口 (80 或 443)。 |
location.protocol | 返回所使用的 web 协议(http:// 或 https://)。 |
location.href | 属性返回当前页面的 URL。 |
location.assign() | 方法加载新的3文档。 |
小案例3:使用 location.assign() 加载一个新文档
<script>
function newDoc(){
window.location.assign("http://www.baidu.com")
}
</script>
<input type="button" value="加载新文档" onclick="newDoc()">
JavaScript Window History
window.history 对象包含浏览器的历史。在编写时可不使用 window 这个前缀。
小案例4:back() 方法和 forward() 方法的简单运用
- history.back() - 加载历史列表中的前一个 URL。 与在浏览器点击后退按钮相同。
<script>
function goBack() {
window.history.back()
}
</script>
<input type="button" value="Back" onclick="goBack()">
- history.forward() - 加载历史列表中的下一个 URL。与在浏览器中点击向前按钮相同。
<script>
function goForward() {
window.history.forward()
}
</script>
<input type="button" value="Forward" onclick="goForward()">
除此之外可以用 history.go() 这个方法来实现向前,后退的功能。
<script>
function a(){
history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}
function b(){
history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}
</script>
<input type="button" value="前进" onclick="a()">
<input type="button" value="后退" onclick="b()">
JavaScript 计时事件
做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
小案例4:计时事件 History () 和 setTimeout() 方法的运用
- setInterval("javascript function",milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。
显示一个时钟并设置停止事件:
// 每隔一秒,不停地执行 myTimer() 方法
var myVar = null;
function Interval() {
myVar = setInterval(function(){myStarTime()}, 1000);
}
function myStarTime() {
var d = new Date();
// 根据本地时间把 Date 对象的时间部分转换为字符串
var t = d.toLocaleTimeString();
document.getElementById("time").innerHTML = t;
}
// 停止时钟
function IntStopTime() {
// 在创建计时方法时你必须使用全局变量
clearInterval(myVar);
}
<div id="time"></div>
<button onclick="Interval()">开始</button>
<button onclick="IntStopTime()">停止</button>
- setTimeout("javascript function", milliseconds) - 在指定的毫秒数后执行指定代码。
function starTime() {
var day = new Date();
var h = day.getHours();
var m = day.getMinutes();
var s = day.getSeconds();
// 在小于10的数字前加一个‘0’
m = checkTime(m);
s = checkTime(s);
var x = document.getElementById("date").innerHTML = h + ":" + m + ":" + s;
// 重复调用 starTime()
/*setTimeout(code,millisec)
code 要调用的函数后要执行的 JavaScript 代码串。
millisec 在执行代码前需等待的毫秒数。*/
var t = setTimeout(function() {starTime()}, 500);
}
// 在小于10的数字前加一个‘0’
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
// 停止时钟
function TTStopTime() {
clearTimeout(t);
}
<div id="date"></div>
<button onclick="starTime()">开始</button>
<button onclick="TTStopTime()">停止</button>