JavaScript浏览器对象示例
1. 窗口对象
2. 屏幕对象
3. 位置对象
4. 历史对象
5. 导航器对象
6. 弹出框
7. 定时
8. cookie
1. 窗口对象
1.点击按钮时打开一个新窗口
DOCTYPE html>
<html>
<head>
<script>
function openWin() {
window.open("https://www.w3schools.com");
}
script>
head>
<body>
<form>
<input type="button" value="Open Window" onclick="openWin()">
form>
body>
html>
2.打开一个新窗口并控制其外观
DOCTYPE html>
<html>
<head>
<script>
function openWin() {
window.open("https://www.w3schools.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="Open Window" onclick="openWin()">
form>
body>
html>
3.模糊和聚焦新窗口
DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400, height=200");
myWindow.blur();
}
function blurWin() {
myWindow.blur();
}
function focusWin() {
myWindow.focus();
}
script>
head>
<body>
<input type="button" value="Open new window" onclick="openWin()">
<input type="button" value="Blur new window" onclick="blurWin()">
<input type="button" value="Focus new window" onclick="focusWin()">
body>
html>
4.关闭新窗口
DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400, height=200");
}
function closeWin() {
myWindow.close();
}
script>
head>
<body>
<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />
body>
html>
5.检查新窗口是否已关闭
DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400 ,height=200");
}
function closeWin() {
if (myWindow) {
myWindow.close();
}
}
function checkWin() {
msg = ""
if (!myWindow) {
msg = "was never opened";
} else {
if (myWindow.closed) {
msg = "is closed";
} else {
msg = "is open";
}
}
document.getElementById("msg").innerHTML =
"myWindow " + msg;
}
script>
head>
<body>
<button onclick="openWin()">Open myWindowbutton>
<button onclick="closeWin()">Close myWindowbutton>
<button onclick="checkWin()">Is myWindow open?button>
<br><br>
<div id="msg">div>
body>
html>
6.将一些文本写入源（父）窗口
DOCTYPE html>
<html>
<head>
<script>
function openWin() {
var myWindow = window.open("", "", "width=400, height=200");
myWindow.opener.document.getElementById("demo").innerHTML =
"A new window has been opened.";
}
script>
head>
<body>
<button onclick="openWin()">Open myWindowbutton>
<p id="demo">p>
body>
html>
7.相对于当前位置移动新窗口
DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
myWindow.moveBy(250, 250)
}
script>
head>
<body>
<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />
body>
html>
8.将新窗口移动到指定位置
DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
myWindow.moveTo(300, 0);
myWindow.focus();
}
script>
head>
<body>
<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />
body>
html>
9.打印当前页面
DOCTYPE html>
<html>
<head>
<script>
function printPage() {
window.print();
}
script>
head>
<body>
<input type="button" value="Print this page" onclick="printPage()" />
body>
html>
10.按指定像素调整窗口大小
DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
w = window.open('','', 'width=100,height=100');
w.focus();
}
function myFunction() {
w.resizeBy(50, 50);
w.focus();
}
script>
head>
<body>
<button onclick="openwindow()">Create windowbutton>
<button onclick="myFunction()">Resize windowbutton>
body>
html>
11.将窗口大小调整为指定大小
DOCTYPE html>
<html>
<head>
<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()">Create windowbutton>
<button onclick="myFunction()">Resize windowbutton>
body>
html>
12.将内容滚动到指定的像素数
DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
window.scrollBy(0, 10);
}
script>
head>
<body>
<input type="button" onclick="scrollWindow()" value="Scroll" />
<h2>Reserved Wordsh2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>
body>
html>
13.滚动内容到指定的位置
DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
window.scrollTo(0, 100);
}
script>
head>
<body>
<input type="button" onclick="scrollWindow()" value="Scroll" />
<h2>Reserved Wordsh2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>
body>
html>
2. 屏幕对象
1.访客屏幕：宽度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width;
script>
body>
html>
2.访客屏幕：高度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
script>
body>
html>
3.访客屏幕：可用宽度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Available screen width is " + screen.availWidth;
script>
body>
html>
4.访客屏幕：可用高度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Available screen height is " + screen.availHeight;
script>
body>
html>
5.访客屏幕：颜色深度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
script>
body>
html>
6.访客屏幕：像素深度
DOCTYPE html>
<html>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
script>
body>
html>
3. 位置对象
1.返回当前URL的主机名和端口
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<h3>The window.location objecth3>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Page hostname is: " + window.location.hostname;
script>
body>
html>
2.返回当前页面的整个URL
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<h3>The window.location objecth3>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"The full URL of this page is:
" + window.location.href;
script>
body>
html>
3.返回当前URL的路径名
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<h3>The window.location objecth3>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
script>
body>
html>
4.返回当前URL的协议部分
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<h3>The window.location objecth3>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
script>
body>
html>
5.加载新文档
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<h3>The window.location objecth3>
<input type="button" value="Load new document" onclick="newDoc()">
<script>
function newDoc() {
window.location.assign("https://www.w3schools.com")
}
script>
body>
html>
6.替换当前文档
DOCTYPE html>
<html>
<body>
<button onclick="window.location.replace('https://www.w3schools.com')">
Replace documentbutton>
body>
html>
7.打破框架
DOCTYPE html>
<html>
<head>
<script>
function breakout() {
if (window.top != window.self) {
window.top.location = "tryjs_breakout.htm";
}
}
script>
head>
<body>
<input type="button" onclick="breakout()" value="Break out of frame!">
body>
html>
4. 历史对象
1.显示历史列表中的URL数量
DOCTYPE html>
<html>
<body>
<p>Display the number of URLs in the history list:p>
<button onclick="myFunction()">Try itbutton>
<p id="demo">p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = history.length;
}
script>
body>
html>
2.在页面上创建后退按钮
DOCTYPE html>
<html>
<head>
<script>
function goBack() {
window.history.back()
}
script>
head>
<body>
<button onclick="goBack()">Go Backbutton>
<p>Clicking on the Back button here will not result in any action, because there is no previous URL in the history list.p>
body>
html>
3.在页面上创建前进按钮
DOCTYPE html>
<html>
<head>
<script>
function goForward() {
window.history.forward()
}
script>
head>
<body>
<button onclick="goForward()">Go Forwardbutton>
<p>Clicking on the Forward button here will not result in any action, because there is no next URL in the history list.p>
body>
html>
4.从历史列表中加载特定的URL
DOCTYPE html>
<html>
<head>
<script>
function goBack() {
window.history.go(-2)
}
script>
head>
<body>
<button onclick="goBack()">Go 2 pages backbutton>
<p>Clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.p>
body>
html>
5. 导航器对象
1.访问者的浏览器中是否启用了cookie?
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The cookieEnabled property returns true if cookies are enabled:p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
script>
body>
html>
2.访问者的浏览器名称是什么？
DOCTYPE html>
<html>
<body>
<h2>JavaScript Navigatorh2>
<p>The appCodeName property returns the code name of the browser.p>
<p>Do not rely on it! "Mozilla" is the application code name for Chrome, Firefox, IE, Safari, and Opera.p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"navigator.appCodeName is " + navigator.appCodeName;
script>
body>
html>
3.访问者浏览器的引擎名称是什么？
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The product property returns the product name of the browser.p>
<p>Do not rely on it! Most browsers returns "Gecko" as product name!p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"navigator.product is " + navigator.product;
script>
body>
html>
4.访问者的浏览器版本信息是什么？
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The appVersion property returns version information about the browser:p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
script>
body>
html>
5.访问者浏览器的用户代理信息是什么？
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The userAgent property returns the user-agent header sent by the browser to the server:p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
navigator.userAgent;
script>
body>
html>
6.访问者浏览器的平台是什么？
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The platform property returns the browser platform (operating system):p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"navigator.platform is " + navigator.platform;
script>
body>
html>
7.访问者浏览器的语言是什么？
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The language property returns the browser's language:p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"navigator.language is " + navigator.language;
script>
body>
html>
8.访问者的浏览器中是否启动了Java?
DOCTYPE html>
<html>
<body>
<h2>The Navigator Objecth2>
<p>The javaEnabled() method returns true if Java is enabled:p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
"javaEnabled is " + navigator.javaEnabled();
script>
body>
html>
6. 弹出框
1.显示弹出框
DOCTYPE html>
<html>
<body>
<h2>JavaScript Alerth2>
<button onclick="myFunction()">Try itbutton>
<script>
function myFunction() {
alert("I am an alert box!");
}
script>
body>
html>
2.在警告框中演示换行符
DOCTYPE html>
<html>
<body>
<h2>JavaScripth2>
<p>Line-breaks in a popup box.p>
<button onclick="alert('Hello\nHow are you?')">Try itbutton>
body>
html>
3.显示确认框
DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Boxh2>
<button onclick="myFunction()">Try itbutton>
<p id="demo">p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
script>
body>
html>
4.显示提示框
DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompth2>
<button onclick="myFunction()">Try itbutton>
<p id="demo">p>
<script>
function myFunction() {
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
script>
body>
html>
7. 定时
1.简单的计时
DOCTYPE html>
<html>
<body>
<h2>JavaScript Timingh2>
<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".p>
<button onclick="setTimeout(myFunction, 3000);">Try itbutton>
<script>
function myFunction() {
alert('Hello');
}
script>
body>
html>
2.另一个简单的时间
DOCTYPE html>
<html>
<body>
<h2>JavaSript setTimeout()h2>
<p id="demo">I will display when two, four, and six seconds have passed.p>
<script>
setTimeout(myTimeout1, 2000)
setTimeout(myTimeout2, 4000)
setTimeout(myTimeout3, 6000)
function myTimeout1() {
document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
document.getElementById("demo").innerHTML = "6 seconds";
}
script>
body>
html>
3.无限循环中的计时事件
DOCTYPE html>
<html>
<body>
<button onClick="setInterval(myCounter, 1000)">Start counter!button>
<p id="demo">Click on the button above and I will count forever.p>
<script>
var c = 0;
function myCounter() {
document.getElementById("demo").innerHTML = ++c;
}
script>
body>
html>
4.无限循环中的计时事件-带有停止按钮
DOCTYPE html>
<html>
<body>
<button onClick="myTimer = setInterval(myCounter, 1000)">Start counter!button>
<p id="demo">Click on the button above and I will count forever.p>
<button onClick="clearInterval(myTimer)">Stop counter!button>
<script>
var c = 0;
function myCounter() {
document.getElementById("demo").innerHTML = ++c;
}
script>
body>
html>
5.使用计时事件创建的时钟
DOCTYPE html>
<html>
<body onload="startTime()">
<h2>JavaScript Clockh2>
<div id="txt">div>
<script>
function startTime() {
const today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
script>
body>
html>
6.使用setInterval()和clearInterval()设置和停止计时器
DOCTYPE html>
<html>
<body>
<p id="demo">Clockp>
<button onclick="clearInterval(myTimer)">Stopbutton>
<script>
var myTimer = setInterval(myClock, 1000);
function myClock() {
document.getElementById("demo").innerHTML = new Date().toLocaleTimeString();
}
script>
body>
html>
8. cookie
1.创建欢迎cookie
DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
script>
head>
<body onload="checkCookie()">body>
html>