1. BOM案例:窗口的开启和关闭
● window.open(url,target):打开一个新窗口。类似于超链接
<!-- window.open("url") 开启一个新窗口跳转到此url网页中 -->
<input type="button" value="单击开启百度" id="turnToBaidu" onclick="window.open('http://www.baidu.com')">
<!-- window.open("url" , '_self') 就在本窗口跳转到此url网页中 -->
<input type="button" value="单击开启百度" onclick="window.open('http://www.baidu.com','_self')">
<!-- window.open("url" , '_blank') ,在新窗口中显示 -->
<input type="button" value="单击开启百度" onclick="window.open('http://www.baidu.com','_blank')">
<!-- window.open("url" , '_parent') 在父窗口中显示 -->
<input type="button" value="单击开启百度" onclick="window.open('http://www.baidu.com','_parent')">
<!-- window.open("url" , '_top') 在顶级窗口中显示 -->
<input type="button" value="单击开启百度" onclick="window.open('http://www.baidu.com','_top')">
● window.close():和open()相对
2. BOM案例:alert和confirm
● alert():弹窗提示
● confirm():弹窗提示用户是否确认,有一个返回值【布尔类型】,用户点“确定”则返回true,否则返回false
<!-- alert 和 confirm -->
<body>
<input type="button" value="alert" onclick="alert('弹窗提示')">
<input type="button" value="confirm" onclick="var ok = confirm('弹窗获取用户的确认'); console.log(ok);">
</body>
3. BOM案例:将当前窗口(非顶级窗口)设置为顶级窗口
单击按钮设置为顶级窗口:
<!-- 当前页面不是顶级窗口时,设置为顶级页面 -->
<body>
<script>
function setTop() {
// window 代表当前浏览器窗口
// 若当前窗口的顶级窗口不是自己,就设置顶级窗口为自己
if (window.top != window.self)
// location 代表地址
window.top.location = window.self.location;
}
</script>
hello,world
<input type="button" value="单击设置为顶级窗口" onclick="setTop()">
</body>
4. 历史记录
● window.history.go(step):前进step步
● window.history.back():后退一步
<!-- 历史记录:前进 -->
<body>
<a href="demo1.html">跳转到一个本地网页</a>
<input type="button" value="前进" onclick="window.history.go(1)">
</body>
<!-- 历史记录:后退 -->
<body>
<input type="button" value="后退" onclick="window.history.back()">
</body>
5. 跳转页面的多种方式【发送请求】
● 直接在浏览器地址栏上写url
● 超链接形式: …
● 提交表单
● window.open(url , target)
● js方式:window.location.href
<!-- window.location.href 方式跳转页面 -->
<body>
<script>
function jump() {
window.location.href = "http://www.baidu.com";
// 也可以省略href : window.location = "http://www.baidu.com";
// document也可以: document.location.href = "http://www.baidu.com";
// document也可以省略href: document.location = "http://www.baidu.com";
}
</script>
<input type="button" value="跳转页面" onclick="jump()">
</body>
© 著作权归作者所有
举报
发表评论
0/200