菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

JavaScript: BOM案例

原创
05/13 14:22
阅读数 121

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
0 点赞
0 评论
收藏