用JS或者jQuery监听 浏览器窗口大小的变化事件

$(window).resize(function () {          //当浏览器大小变化时
    alert($(window).height());          //浏览器时下窗口可视区域高度
    alert($(document).height());        //浏览器时下窗口文档的高度
    alert($(document.body).height());   //浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});

### 如何使用 jQuery 捕获或监听页面历史导航(前进/后退)事件 为了捕获或监听页面的历史导航事件,可以利用 `popstate` 事件。当活动历史记录条目更改时会触发此事件。通过监听事件并结合 `history.pushState()` 方法修改浏览历史,可以在一定程度上控制页面行为。 下面是一段基于上述原理的代码示例: ```javascript $(document).ready(function() { // 修改当前URL而不刷新页面,并创建新的历史记录条目 window.history.pushState({path:window.location.href},'',window.location.href); // 绑定 popstate 事件处理器至窗口对象 $(window).on('popstate', function(event) { var state = event.originalEvent.state; if (state !== null){ console.log("新状态:", state); }else{ console.log("无状态信息"); } // 阻止默认动作可防止页面跳转 // 此处可以根据需求自定义逻辑处理 history.pushState({path:window.location.href},'',window.location.href); alert("检测到了一次浏览器前进或后退操作!"); }); }); ``` 这段脚本会在文档加载完成后执行,它首先调用了 `pushState()` 来更新 URL 并添加一个新的历史记录项;接着绑定了一个回调函数给 `popstate` 事件,在每次发生前进一步骤或后退一步骤的操作时都会触发这个回调函数[^1]。 需要注意的是,虽然这种方式能够在大多数情况下正常工作,但由于各浏览器的具体实现差异以及用户的个性化设置等因素影响,无法绝对保证其有效性。此外,强制干预用户习惯性的交互方式可能引起不良体验,所以在实际应用中应当谨慎评估利弊得失[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值