JavaScript监听浏览器窗口大小变化

唯·爱

1. 以下是一个完整且高效的 JavaScript 代码示例，用于监听浏览器窗口大小的变化
   
2. 
   
3. ```javascript
   
4. // 定义一个变量来保存窗口大小改变的回调函数
   
5. let resizeCallback;
   
6. 
   
7. // 创建一个函数来处理窗口大小改变事件
   
8. function handleResize() {
   
9.   // 检查回调函数是否存在并且是一个函数
   
10.   if (typeof resizeCallback === 'function') {
    
11.     // 调用回调函数，并传入当前窗口的宽度和高度作为参数
    
12.     resizeCallback(window.innerWidth, window.innerHeight);
    
13.   }
    
14. }
    
15. 
    
16. // 创建一个函数来添加或更新窗口大小改变的回调函数
    
17. function addResizeListener(callback) {
    
18.   // 将回调函数赋值给 resizeCallback 变量
    
19.   resizeCallback = callback;
    
20. 
    
21.   // 使用 addEventListener 方法来监听窗口大小改变事件
    
22.   window.addEventListener('resize', handleResize);
    
23. }
    
24. 
    
25. // 创建一个函数来移除窗口大小改变的回调函数
    
26. function removeResizeListener() {
    
27.   // 将 resizeCallback 变量设置为 null
    
28.   resizeCallback = null;
    
29. 
    
30.   // 使用 removeEventListener 方法来移除窗口大小改变事件的监听
    
31.   window.removeEventListener('resize', handleResize);
    
32. }
    
33. ```
    
34. 
    
35. 使用示例：
    
36. 
    
37. ```javascript
    
38. // 定义一个回调函数来处理窗口大小改变事件
    
39. function handleWindowResize(width, height) {
    
40.   console.log('窗口大小改变了：', width, height);
    
41. }
    
42. 
    
43. // 添加窗口大小改变的监听器，并传入回调函数
    
44. addResizeListener(handleWindowResize);
    
45. 
    
46. // 移除窗口大小改变的监听器
    
47. removeResizeListener();
    
48. ```
    
49. 
    
50. 在上面的示例中，我们定义了一个 `addResizeListener` 函数来添加窗口大小改变的监听器，并传入一个回调函数作为参数。当窗口大小改变时，回调函数将被调用，并传入当前窗口的宽度和高度作为参数。我们还提供了一个 `removeResizeListener` 函数来移除窗口大小改变的监听器。
    
51. 
    
52. 请注意，这个代码示例使用了 `window.innerWidth` 和 `window.innerHeight` 属性来获取窗口的宽度和高度。这些属性返回的是窗口的内部宽度和高度，不包括滚动条和边框的宽度和高度。如果你需要考虑滚动条和边框的宽度和高度，可以使用 `window.outerWidth` 和 `window.outerHeight` 属性。

复制代码