BOM - window 对象

最新推荐文章于 2024-04-26 16:47:03 发布

劫辞

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量80

点赞数

分类专栏： JavaScript - Web Api 文章标签： javascript

本文链接：https://blog.csdn.net/qq_53109172/article/details/131964627

版权

JavaScript - Web Api 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

自身方法

open

打开一个新窗口

open(页面路径, 打开目标(类似于 a 元素的 target), 配置)

代码如下：

<body>
  <button class="btn">打开</button>

  <script>
    const btn = document.querySelector('.btn')

    btn.addEventListener('click', function () {
      window.open('https://www.baidu.com')
    })
  </script>
</body>

比如指定 iframe打开，如下：

<body>
  <button class="btn">打开</button>


  <iframe src="" name="jcframe" frameborder="0"></iframe>
  <script>
    const btn = document.querySelector('.btn')

    btn.addEventListener('click', function () {
      window.open('https://blog.csdn.net/qq_53109172/article/details/129573835', 'jcframe')
    })
  </script>
</body>

结果如图：

当你需要打开的窗口是弹出来的，而不是新开的标签页时，可以使用第三个参数进行配置，第二个参数留空，如下：

btn.addEventListener('click', function () {
      window.open('https://blog.csdn.net/qq_53109172/article/details/129573835', null, "width=400,height=220")
})

结果如图：
当然还有更多配置，可以自行查看 mdn 文档，window.open

这个方法会返回一个 window 对象，通过这个 window 对象的 resizeTo 或者 resizeBy 方法就可以控制窗口的尺寸，代码如下：

btn.addEventListener('click', function () {
      const w = window.open('https://blog.csdn.net/qq_53109172/article/details/129573835', null, "width=400,height=220")
      w.resizeTo(600, 400)
})

结果如图：

在这里插入图片描述

alert

弹出一个提示弹窗，样式和浏览器有关

代码如下：
```
alert('hello world')
```
效果自行测试即可

confirm

也是弹出一个弹窗，但是具备返回值，点击确认返回 true 点击取消返回 false

prmpt

提示输入弹窗，可以记录一些用户输入的值，点击确认返回用户输入的值，没有输入返回空字符串，点击取消返回 null

对象属性

location

地址栏对象

属性输出如图：
herf 属性：目前的地址
reload 方法：刷新当前页面-重载

navigator

记录浏览器的一些信息

详细属性查看：navigator

history

表示历史记录，只能获取当前网站访问了那些网页，但是权限也很低

详细属性查看：History

go 方法：前进/后退方法，正数就是前进，负数就是后退
back 方法：后退方法
forword 方法：前进方法

劫辞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM - window 对象

提示输入弹窗，可以记录一些用户输入的值，点击确认返回用户输入的值，没有输入返回空字符串，点击取消返回 null。也是弹出一个弹窗，但是具备返回值，点击确认返回 true 点击取消返回 false。表示历史记录，只能获取当前网站访问了那些网页，但是权限也很低。当然还有更多配置，可以自行查看 mdn 文档，弹出一个提示弹窗，样式和浏览器有关。herf 属性：目前的地址。记录浏览器的一些信息。
复制链接

扫一扫