本页目录

30分钟

JavaScript Browser 对象实例

使用JavaScript来访问和控制浏览器对象实例。

Window 对象

弹出一个警告框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){
	alert("你好，我是一个警告框！");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="显示警告框" />

</body>
</html>

弹出一个带折行的警告框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮在弹窗总使用换行。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	alert("Hello\nHow are you?");
}
</script>

</body>
</html>

弹出一个确认框，并提醒访客点击的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

弹出一个提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>

</body>
</html>

点击一个按钮时，打开一个新窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function open_win() {
	window.open("http://www.runoob.com");
}
</script>
</head>
<body>
	
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
	
</body>
</html>

打开一个新窗口，并控制其外观

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function open_win(){
	window.open("http://www.runoob.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>
<body>
	
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
	
</body>
</html>

打开多个新窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function open_win() {
	window.open("https://c.runoob.com/");
	window.open("http://www.runoob.com/");
}
</script>
</head>
<body>
	
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
	
</body>
</html>

确保新的窗口没有获得焦点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是'我的窗口'</p>");
	myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="打开窗口" onclick="openWin()" />

</body>
</html>

确保新的窗口获得焦点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是'我的窗口'</p>");
	myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="打开窗口" onclick="openWin()" />

</body>
</html>

关闭新窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open("","","width=200,height=100");
	myWindow.document.write("<p>这是'我的窗口'</p>");
}
function closeWin(){
	myWindow.close();
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />

</body>
</html>

检查新的窗口是否已关闭

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var myWindow;
function openWin(){
	myWindow=window.open("","","width=400,height=200");
}
function closeWin(){
	if (myWindow){
		myWindow.close();
	}
}
function checkWin(){
	if (!myWindow){
		document.getElementById("msg").innerHTML="我的窗口没有被打开!";
	}
	else{
		if (myWindow.closed){
			document.getElementById("msg").innerHTML="我的窗口被关闭!";
		}
		else{
			document.getElementById("msg").innerHTML="我的窗口没有被关闭!";
		}
	}	
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
<br><br>
<input type="button" value="我的窗口被关闭了吗?" onclick="checkWin()" />
<br><br>
<div id="msg"></div>
	
</body>
</html>

返回新窗口的名字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var myWindow;
function openWin(){
	myWindow=window.open('','MsgWindow','width=200,height=100');
	myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>");
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />

</body>
</html>

传输一些文本到源（父）窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
	myWindow.focus();
	myWindow.opener.document.write("<p>这个是源窗口!</p>");
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />

</body>
</html>

相对于当前位置移动新窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
}
function moveWin(){
	myWindow.moveBy(250,250);
	myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动我的窗口" onclick="moveWin()" />

</body>
</html>

移动新窗口到指定位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
}
function moveWin(){
	myWindow.moveTo(0,0);
	myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="打开窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动窗口" onclick="moveWin()" />

</body>
</html>

打印当前页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function printpage(){
	window.print();
}
</script>
</head>
<body>

<input type="button" value="打印此页面" onclick="printpage()" />

</body>
</html>

用像素指定窗口大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function resizeWindow(){
	top.resizeBy(100,100);
}
</script>
</head>

<body>
<form>
<input type="button" onclick="resizeWindow()" value="调整窗口">
</form>
<p><b>注意：</b>我们使用了 <b>top</b> 元素而不是<b>window</b>元素, 因为我们使用<b>frames</b>。如果你不使用<b>frames</b>，使用<b>window</b>元素来代替。</p>
</body>

</html>

指定窗口大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var w;
function openwindow(){
	w=window.open('','', 'width=100,height=100');
	w.focus();
}
function myFunction(){
	w.resizeTo(500,500);
	w.focus();
}
</script>
</head>
<body>

<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>

</body>
</html>

由指定的像素数滚动内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function scrollWindow(){
	window.scrollBy(100,100);
}
</script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
</html>

滚动到指定内容处

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function scrollWindow(){
	window.scrollTo(100,500);
}
</script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
</html>

一个简单的时钟

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function timedText(){
	var x=document.getElementById('txt');
	var t1=setTimeout(function(){x.value="2 秒"},2000);
	var t2=setTimeout(function(){x.value="4 秒"},4000);
	var t3=setTimeout(function(){x.value="6 秒"},6000);
}
</script>
</head>
<body>
	
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>

</html>

用setTimeout() 和 clearTimeout()设置和停止定时器

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	}
}
function stopCount(){
	clearTimeout(t);
	timer_is_on=0;
}
</script>
</head>
<body>
	
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
</body>
	
</html>

用setInterval() 和 clearInterval()设置和停止定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮，等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    setInterval(function(){ alert("Hello"); }, 3000);
}
</script>

</body>
</html>

Navigator 对象

访问者的浏览器的详细

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

Screen 对象

访问者的屏幕的详细

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h3>你的屏幕:</h3>
<script>
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可以宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("颜色深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("颜色分辨率: ");
document.write(screen.pixelDepth);
</script>

</body>
</html>

History 对象

返回一个url的历史清单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write("历史列表中URL的数量： " + history.length);
</script>

</body>
</html>

创建一个后退按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function goBack(){
	window.history.back()
}
</script>
</head>
<body>

<input type="button" value="返回" onclick="goBack()">

<p>注意,点击后退按钮在这里不会导致任何行动,因为以前的历史列表中没有该URL</p>

</body>
</html>

创建一个前进按钮

<!DOCTYPE html>
<html>
<head>
<script>
function goForward(){
	window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="前进" onclick="goForward()">

<p>注意,点击这里的前进按钮不会导致任何行动,因为历史列表中没有下一个URL。</p>

</body>
</html>

从url的历史清单转到指定的url

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function goBack(){
	window.history.go(-2)
}
</script>
</head>
<body>

<input type="button" value="后退2页" onclick="goBack()">
<p>注意,点击“后退2页”按钮将不会导致任何行动,因为以前的历史列表中没有URL。</p>

</body>
</html>

Location 对象

返回主机名和当前url的端口号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<script>
document.write(location.host);
</script>

</body>
</html>

返回当前页面的整个URL

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write(location.href);
</script>

</body>
</html>

返回当前url的路径名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write(location.pathname);
</script>

</body>
</html>

返回当前URL的协议部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write(location.protocol);
</script>

</body>
</html>

加载个新文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function newDoc(){
	window.location.assign("http://www.runoob.com")
}
</script>
</head>
<body>

<input type="button" value="载入新文档" onclick="newDoc()">

</body>
</html>

重新载入当前文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function reloadPage(){
  location.reload()
}
</script>
</head>
<body>

<input type="button" value="重新加载页面" onclick="reloadPage()">

</body>
</html>

替代当前文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function replaceDoc(){
	window.location.replace("https://www.runoob.com")
}
</script>
</head>
<body>

<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">

</body>
</html>

跳出框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function breakout(){
	if (window.top!=window.self) {
		window.top.location="tryjs_breakout.html";
	}
}
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="跳出框架!">

</body>
</html>

上一节: JavaScript 对象实例下一节: JavaScript HTML DOM 实例

直播支持申请

目录

评价

推荐

JavaScript 教程

1. JavaScript 教程

JavaScript 简介

为什么学习 JavaScript?

谁适合阅读本教程?

JavaScript 参考手册

您将学到什么？

JavaScript 与 Java

ECMAScript 版本

JavaScript 用法

<script> 标签

<body> 中的 JavaScript

JavaScript 函数和事件

在 <head> 或者 <body> 的JavaScript

<head> 中的 JavaScript 函数

<body> 中的 JavaScript 函数

外部的 JavaScript

JavaScript 输出

JavaScript 显示数据

使用 window.alert()

操作 HTML 元素

写到 HTML 文档

写到控制台

JavaScript 语法

JavaScript 字面量

JavaScript 变量

JavaScript 操作符

JavaScript 语句

JavaScript 关键字

JavaScript 注释

JavaScript 数据类型

数据类型的概念

JavaScript 函数

JavaScript 字母大小写

JavaScript 字符集

JavaScript 语句

分号 ;

JavaScript 代码

JavaScript 代码块

JavaScript 语句标识符

空格

对代码行进行折行

JavaScript 注释

JavaScript 多行注释

使用注释来阻止执行

在行末使用注释

JavaScript 变量

JavaScript 数据类型

声明（创建） JavaScript 变量

一条语句，多个变量

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

JavaScript 数据类型

JavaScript 拥有动态类型

JavaScript 字符串

JavaScript 数字

JavaScript 布尔

JavaScript 数组

JavaScript 对象

Undefined 和 Null

声明变量类型

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

访问对象方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

JavaScript 作用域