设置监听动态获取window.innerWidth和window.innerHeight

在Web开发中，`window.innerWidth`和`window.innerHeight`属性可以获取浏览器窗口的内部宽度和高度，不包括滚动条等边框。如果想要动态监听窗口尺寸的变化，可以使用`window.onresize`事件。

以下是如何实现动态获取窗口内部宽度和高度，并在窗口尺寸变化时更新这些值的示例代码：

// 获取当前窗口的内部宽度和高度
function updateWindowSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log("当前窗口宽度为：" + width + "，高度为：" + height);
    // 这里可以添加代码将获取到的宽度和高度显示在页面上或者做其他操作
}

// 初始获取一次窗口大小
updateWindowSize();

// 监听窗口尺寸变化事件
window.onresize = function() {
    updateWindowSize();
};

在这个示例中，`updateWindowSize`函数负责获取窗口的宽度和高度，并在控制台输出。首先调用一次该函数来获取初始尺寸，然后通过为`window.onresize`事件分配一个新函数来监听窗口尺寸的变化。

当窗口大小发生变化时，`onresize`事件会被触发，随后执行`updateWindowSize`函数以获取并处理新的尺寸数据。

相关问题

vue2+js设置监听动态获取window.innerWidth和window.innerHeight

在Vue2中，如果想要动态获取`window.innerWidth`和`window.innerHeight`并设置监听，可以使用Vue的响应式系统来实现。由于Vue的响应式系统不直接支持对原生DOM属性的监听，因此需要借助`watch`来观察`window`对象的变化。

下面是一个简单的示例，展示如何在Vue2项目中实现监听`window.innerWidth`和`window.innerHeight`：

new Vue({
  el: '#app',
  data() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  watch: {
    // 监听window尺寸变化
    '$route'(to, from) {
      this.resize();
    },
    // 监听resize事件
    '$window'(to, from) {
      this.resize();
    }
  },
  methods: {
    resize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  mounted() {
    // 组件挂载后立即触发一次resize方法，更新尺寸
    this.resize();
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    // 销毁前移除事件监听
    window.removeEventListener('resize', this.resize);
  }
});

在上述代码中，我们在Vue实例的`data`函数中定义了`width`和`height`变量来存储当前窗口的宽度和高度。在`mounted`钩子函数中，我们设置了窗口的监听事件，并在`resize`方法中更新`width`和`height`的值。为了避免内存泄漏，我们在`beforeDestroy`钩子函数中移除了事件监听。

需要注意的是，上述代码中的`$route`和`$window`是示例用法，实际上Vue并没有内置这些响应式变量。在实际应用中，你可以使用`this.$route`来获取路由信息，而`$window`需要你自定义一个响应式的`window`对象。

function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };根据你提供的代码，我修改后任然存在行数过多时，悬浮窗显示后靠近页面底部，无法显示完整图片在当前页面，并且我需要在点击放大图片后无法再此点击当前放大图片，等我还原取消悬浮窗后才可以再次点击图片放大，我代码存在什么问题

根据您提供的代码，我注意到有几个问题可能导致您遇到的问题：

1. 悬浮窗显示在页面底部：这可能是由于计算偏移量时没有考虑到页面滚动的原因。您可以尝试将`scrollTop`的计算方式修改为`scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;`，以确保在不同浏览器中都能正确获取滚动的偏移量。

2. 图片无法再次点击放大：这可能是由于点击事件监听器没有正确设置。目前的代码中，点击悬浮窗时会隐藏弹出窗口，但没有阻止事件冒泡到图片上。您可以尝试添加以下代码来阻止点击事件冒泡：

popupImg.onclick = function (event) {
  event.stopPropagation();
};

这样点击图片时就不会再隐藏弹出窗口了。

希望这些修改可以解决您遇到的问题。如果问题仍然存在，请提供更多的细节，以便我能够更准确地帮助您解决问题。