JavaScript基础04
- 001-BOM编程
- 002-open
- 003-弹出消息框和确认框
- 004-将当前窗口设置为顶级窗口
- 005
- 006-history对象
- 007
- 008-设置浏览器地址栏上的URL
001-BOM编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程</title>
</head>
<body>
<script type="text/javascript">
</script>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com');"/>
<input type="button" value="开启百度（当前窗口）" onclick="window.open('http://www.baidu.com','_self');"/>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com','_blank');"/>
<input type="button" value="开启百度（父窗口）" onclick="window.open('http://www.baidu.com','_parent');"/>
<input type="button" value="开启百度（顶级窗口）" onclick="window.open('http://www.baidu.com','_top');"/>
<input type="button" value="打开表单验证" onclick="window.open('002-open.html')"/>
</body>
</html>
002-open
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>close</title>
</head>
<body>
<input type="button" value="关闭当前窗口" onclick='window.close()';/>
</body>
</html>
003-弹出消息框和确认框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
if(window.confirm("亲，确认删除数据吗？")){
alert("del data...");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框')"/>
<input type="button" value="弹出确认框（删除）" onclick="del()"/>
</body>
</html>
004-将当前窗口设置为顶级窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将当前窗口设置为顶级窗口</title>
</head>
<body>
<script type="text/javascript">
</script>
<iframe src="005.html" width="500px" height="500px"> </iframe>
</body>
</html>
005
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>005</title>
</head>
<body>
005页面<br>
<script type="text/javascript">
function setTop(){
console.log(window.top != window.self);
if(window.top != window.self){
window.top.location = window.self.location;
}
}
</script>
<input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口"/>
</body>
</html>
006-history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<a href="007.html">007页面</a>
<input type="button" value="前进" onclick="window.history.go(1)"/>
</body>
</html>
007
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>007</title>
</head>
<body>
007 page!
<input type="button" value="后退" onclick="window.history.back()"/>
<input type="button" value="后退" onclick="window.history.go(-1)"/>
</body>
</html>
008-设置浏览器地址栏上的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
document.location = "http://www.sina.com.cn";
}
</script>
<input type="button" value="新浪" onclick="goBaidu()"/>
<input type="button" value="百度" onclick="window.open('http://www.baidu.com');"/>
</body>
</html>
