JavaScript： BOM案例

最新推荐文章于 2023-08-04 11:03:12 发布

禾子逸

最新推荐文章于 2023-08-04 11:03:12 发布

阅读量382

点赞数

分类专栏： JavaScript 文章标签： web js javascript

本文链接：https://blog.csdn.net/qq_43093129/article/details/116104061

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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
超链接形式：<a href = "url"> ... </a>
提交表单
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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript： BOM案例

1. BOM案例：窗口的开启和关闭window.open(url,target)：打开一个新窗口。类似于超链接<input type="button" value="单击开启百度" id="turnToBaidu" onclick="window.open('http://www.baidu.com')"><!-- window.open("url" , '_self') 就在
复制链接

扫一扫