JavaScript(JS)浏览器窗口的相关操作

41872 阅读 0 评论 123 点赞

上一节我们详细讲解了JS中的Cookie，本节我们将学习如何通过JS操作浏览器窗口。浏览器窗口对象对应window对象，由window对象来进行控制。

问：如果想要更改浏览器窗口大小和位置，该怎么办？

答：很多读者都看到可以使用window.resizeTo()函数来更改浏览器窗口大小，通过window.moveTo()来更改浏览器窗口的位置。可是由于现代浏览器默认禁止脚本修改浏览器窗口大小，所以这个方法看不到效果。我们可以通过window.open()来重新打开一个窗口，并进行大小的修改和位置的移动，实现控制浏览器的效果。

比如这里对浏览器窗口进行修改，但是浏览器没有反应，这两个函数算是“废了”。

  /* 注意，浏览器禁止脚本修改窗口大小，所以看不到该代码操作无效 */
 window.resizeTo(500,300)//更改浏览器窗口宽高为500*300
 window.moveTo(200,200)//更改浏览器窗口位置到（200，200）的位置

不过我们可以通过window.open()来看到窗口发生变化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dotcpp</title>
</head>
<body>
  <button onclick="openNewWindow()">点击打开新窗口</button>
 
  <script>
    function openNewWindow() {
      // 创建新窗口并指定大小和位置
      const newWindow = window.open(
        'about:blank',
        'newWindow',
        'width=600,height=400,left=100,top=100,resizable=yes'
      );
      
      // 在新窗口中添加内容
      if (newWindow) {
        newWindow.document.write(`
          <html>
            <head><title>新窗口</title></head>
            <body>
              <h1>这是一个新窗口</h1>
              <p>尺寸：600x400</p>
              <p>位置：left=100, top=100</p>
              <button onclick="window.resizeTo(800,600)">调整为800x600</button>
              <button onclick="window.moveTo(200,150)">移动到(200,150)</button>
              <button onclick="window.resizeTo(600,400);window.moveTo(100,100)">重置</button>
            </body>
          </html>
        `);
      } else {
        alert('请允许弹出窗口');
      }
    }
  </script>
</body>
</html>

在新窗口里，我们就可以调整浏览器窗口大小和位置，实现我们的想法。

下面我们讲讲如何对网页内容进行滚动。

通过下面的2个属性对页面内容进行左右和上下拖动：

属性	描述
scrollLeft	元素内容向左滚动的像素数（被隐藏在内容区域左侧的像素数）
scrollTop	元素内容向上滚动的像素数（被隐藏在内容区域上方的像素数）

下面我们来设计一个返回顶部功能：对于这几个滚动属性，读者一定对scrollTop不陌生了。平常我们浏览网页时，我们都能看到一个向上的箭头（返回顶部），我们只要点击该箭头就能回到页面顶部，就不用一点一点地滑动页面了。（当然，键盘上的Home键也能实现这个效果）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>返回顶部</title>
  <style>
    /* 设置按钮样式 */
    #top {
      font-size: 16px;
      writing-mode: vertical-lr;
      display: block;
      height: 80px;
      width: 30px;
      background-color: yellowgreen;
      text-decoration: none;
      color: #333;
      text-align: center;
      padding: 5px;
      
      /* 固定在右下角 */
      position: fixed;
      right: 20px;
      bottom: 100px;
      z-index: 1000;
    }

    #top:hover {
      background-color: #8bc34a;
    }
  </style>
</head>

<body>
  <a href="javascript:void(0);" id="top">返回顶部</a>
 
  <script>
    let content =''
    /* 1. 先让页面足够长：通过for循环+innerHTML(+=)实现 */
    for (let i = 0; i < 200; ++i) {
      content+='Dotcpp编程<br>'
    }
     document.querySelector('body').innerHTML+=content
    /* 3. 事件监听，点击实现返回顶部操作 */
    document.querySelector('#top').addEventListener('click', function() {
      // 平滑滚动到顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      
      // 或者使用这种方式（立即滚动）
      // window.scrollTo(0, 0);
    });
  </script>
</body>

</html>

总结：本节我们主要学习JS如何操作浏览器窗口，包括新窗口的大小设置和位移，如何制作一个一键返回按钮等。