window 对象的属性与方法

打开和关闭浏览器窗口

在 JavaScript 中,可以使用window.open()方法打开一个新的浏览器窗口或标签页。该方法接受四个参数:

要加载的 URL
窗口的名称或目标
一个特性字符串,列出新窗口的各种属性
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

下面是一个打开和关闭窗口的示例

<body>
  <p>窗口<span id="status">关闭</span>状态</p>
  <button onclick="openWin()">打开窗口</button>
  <button onclick="closeWin()">关闭窗口</button>
  <script>
    let win;
    const statusEl = document.getElementById('status');

    function openWin() {
      // 第四个参数是历史记录，false是新增一条，true是替换主窗口历史记录
      win = window.open('https://www.baidu.com/', '窗口名', 'width=500,height=500', true);
      console.log(win.name);
      checkStatus();
    }

    function closeWin() {
      win.close();
      checkStatus();
    }

    function checkStatus() {
      statusEl.textContent = win.closed ? '关闭' : '打开';
    }
  </script>
</body>

在上面的代码中:

点击"打开窗口"按钮会调用openWin()函数,打开一个宽高都为 500px 的新窗口,加载百度首页。
点击"关闭窗口"按钮会调用closeWin()函数,关闭之前打开的窗口。
checkStatus()函数用于检查窗口的打开/关闭状态,并更新页面中相应的文字内容。

注意,如果把window.open()的第四个参数设为true,新窗口将替换浏览器历史记录中的当前页面。

窗口特征

window.open()方法的第三个参数可以设置新窗口的各种特征,常用的特征包括:

height:窗口的高度。不能小于 100。
width:窗口的宽度。不能小于 100。
left:新窗口的左坐标。
top:新窗口的上坐标。
location:是否在窗口中显示地址字段。默认为 yes。
menubar:是否在窗口中显示菜单栏。默认为 yes。
resizable:是否可以通过拖动改变窗口的大小。默认为 yes。
scrollbars:是否在窗口中显示滚动条。默认为 yes。
status:是否在窗口中显示状态栏。默认为 yes。
titlebar:是否在窗口中显示标题栏。默认为 yes。
toolbar:是否在窗口中显示工具栏。默认为 yes。

更多特征参见:Window open() 方法 | 菜鸟教程

操作 window.open 打开的窗口

通过window.open()打开的新窗口对象有一些方法可以用于控制其大小、位置等,常用的有:

resizeBy(width, height):根据指定的像素来调整窗口的大小。
resizeTo(width, height):把窗口大小调整到指定的宽度和高度。
moveBy(x, y):把窗口向右移动 x 个像素,向下移动 y 个像素。
moveTo(x, y):把窗口移动到屏幕左上角的指定坐标(x, y)处。

下面是一个操作新窗口的示例

<body>
  <button onclick="openWin()">打开窗口</button>
  <button onclick="resizeWinTo()">调整到指定尺寸</button>
  <button onclick="resizeWinBy()">调整指定大小</button>
  <button onclick="moveWinBy()">相对移动</button>
  <button onclick="moveWinTo()">移动到指定位置</button>
  <button onclick="printWin()">打印</button>

  <script>
    let win;

    function openWin() {
      win = window.open('', '', 'width=500,height=600');
    }

    function resizeWinTo() {
      win.resizeTo(400, 400);
    }

    function resizeWinBy() {
      win.resizeBy(50, 50);
    }

    function moveWinBy() {
      win.moveBy(50, 50);
    }

    function moveWinTo() {
      win.moveTo(100, 100);
    }

    function printWin() {
      win.print();
    }
  </script>
</body>

除了改变新窗口的大小和位置,还可以调用print()方法让其执行打印操作。

弹出框

浏览器环境中有三种内置的弹出框可以与用户交互:

alert(message):显示一个带有一段消息和一个确认按钮的警告框。
confirm(message):显示一个带有一段消息和确认/取消按钮的对话框。点击确认返回 true,点击取消返回 false。
prompt(message, default):显示一个可提示用户输入的对话框。第二个参数为输入框的默认值。点击确认返回输入值,点击取消返回 null。

使用示例如下:

<body>
  <button onclick="openAlert()">打开alert</button>
  <button onclick="openConfirm()">打开confirm</button>
  <button onclick="openPrompt()">打开prompt</button>
  <script>
    function openAlert() {
      alert('你吃饭了吗');
    }

    function openConfirm() {
      const result = confirm('您是女性吗？');
      document.write(result ? '我是女性' : '我是男性');
    }

    function openPrompt() {
      const num1 = Number(prompt('请填写第一个数字'));
      const num2 = Number(prompt('请填写第二个数字'));
      console.log(num1 + num2);
    }
  </script>
</body>

在实际开发中,原生的弹出框由于不够美观,通常会被自定义的弹框组件所取代。但在一些简单的交互场景下,使用内置弹框可以快速地与用户沟通。

打开和关闭浏览器窗口​

窗口特征​

操作 window.open 打开的窗口​

弹出框​

打开和关闭浏览器窗口

窗口特征

操作 window.open 打开的窗口

弹出框