js中onload与onunload妙用(转载）

最新推荐文章于 2024-05-23 22:18:20 发布
最新推荐文章于 2024-05-23 22:18:20 发布
阅读量831 收藏
点赞数
分类专栏： 软件开发 文章标签： js onload onunload javascript

js中onload与onunload妙用(转载）

引言：今天周末没事，就想起前面自己做的一个B2C的电子商务平台，还有些一些地方没有完善，就想着完善，嗯，问题是这样的，在电子商务平台中有这样一个场景，我将购物车放置在Session中，使其在整个购物的过程中都能从Session中得到购物车模型，我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量，但是如果我关闭窗口，怎样让Session中的购物车模型中的商品数量添加到数据库中，于是我查找了GOOGLE、百度，得到的第一个提示，就是：关闭窗口自动清除Session，于是找到的第一个方法就是在<body>标签使用onunload属性，调用某个js如：<body οnunlοad=”close()”>该方法是关闭窗口时触发close()事件，于是我就可以在close()方法中定义删除Session的方法……

         但是事实不是这样的，当你刷新这个页面，以及点击这个页面上的链接时onunload都会触发，于是我又在GOOGLE，百度中查找：得到的答案如下：

<script>
window.onunload = function(){if(self.screenTop>9000)alert('该窗口已经被关闭！')}
</script>
或
<script>
window.onunload = function(){if(self.screenLeft>9000)alert(该窗口已经被关闭！.')}
</script>

说明：

window.screenTop

获取浏览器客户区左上角相对于屏幕左上角的 y 坐标

screenTop>后面的数字必须大于你显示分辩率中的高度

比如，800*600, 这个数得大于600 

window.screenLeft

获取浏览器客户区左上角相对于屏幕左上角的 x 坐标

screenLeft>后面的数字必须大于你显示分辩率中的宽度

比如，800*600, 这个数得大于800

 

通常这两个值设为9000

于是我使用上面的方法，实现了只有在关闭页面才触发onunload事件。

 

总结：

①    当使用onunload属性时，你可以使用Ajax来清除Session，也可以使用window.location.href来触发某个请求，比如我在这个用的是struts2我可以用<body οnunlοad=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action’” >

然后有closeWindow.action这个请求去处理Session中购物车的商品，让其数量添加到数据库中；

②    在此处我也有Ajax来处理请求，但是事实上我们只要处理Session，并不要处理完Session后有任何返回的异步信息，所以我还是使用的触发一个请求的方法，最终的写法如下：

<body 

οnunlοad="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">

 

82年的可乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中unload什么意思_JS之onunload、onbeforeunload事件详解
weixin_39913117的博客
12-21 993
简介onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。onbeforeunload 是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调...
js中onload与onunload的使用示例
10-26
onload与onunload想必大家并不陌生吧，下面为大家演示下js中onload与onunload的妙用，感兴趣的朋友可以参考下，希望对大家有所帮助
JS之onunload、onbeforeunload事件详解
weixin_34221773的博客
11-03 855
简介 onunload，onbeforeunload都是在刷新或关闭时调用，可以在&lt;script&gt;脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。 onbeforeunload 是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载...
onload和onunload有什么区别（代码举例说明）
最新发布
2301_80448468的博客
05-23 324
onload和onunload是两种常用于网页中的事件处理器（event handlers），但它们处理的是完全不同的页面生命周期事件。onload事件会在页面或指定的元素（如图片、框架等）完成加载后触发。对于页面整体来说，onload事件在 DOM 完全加载和解析完成后触发，并且还会等待样式表、图像和子框架完成加载。这意味着在onload事件触发之前，用户可能还无法看到或交互页面上的所有内容。在这个例子中，当页面完成加载后，控制台会输出 "页面已完全加载！onunload。
javascript   卸载事件（onunload）
weixin_33971205的博客
09-09 428
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用 的程序。 注意：不同浏览器对onunload事件支持不同。 如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。如图： 运行结果：（IE浏览器）个人补充以下几点：浏览了下其他的网页，自己总结了下，不对的地方多多指教卸载事件通俗的讲，就是离开当前网页...
前端学习之js学习之onunload
Dlili_yang的博客
10-18 564
本来一直在学习菜鸟窝的《仿京东淘宝》实践项目，被领导告知要求学前端 于是去慕课网参加的前端工程师路径的学习慕课网web前端学习路径 今天学习到JavaScript进阶篇中的卸载事件onunload 文中的介绍是“当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。” 但是按照它上面的例子写了之后发现刷新和关闭都不会调用onunload 翻了翻一下的评
Jqyery中同等与js中windows.onload的应用
10-28
在JavaScript中，我们可以这样使用 `window.onload`： ```javascript window.onload = function() { // 页面加载完成后执行的代码 }; ``` 或者，如果你有一个已经定义好的函数，你可以这样设置： ```javascript ...
Onload,Onunload和onbeforeunload方法的异同
03-19
在JavaScript的世界里，事件处理是网页交互的核心，而`onload`、`onunload`以及`onbeforeunload`就是三个与页面生命周期紧密相关的事件。理解它们的异同对于优化网页性能和提供更好的用户体验至关重要。 首先，`...
JavaScript中OnLoad几种使用方法
10-27
在前几个项目的开发中遇到onload使用的几种情形,接下来详细介绍下
JavaScript小技巧 —— 关闭窗口触发事件 window.onunload
liuheworld的专栏
12-19 1356
&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;转载请注明出处 作者：六合江山&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&
JavaScript学习笔记:onload加载事件与onunload事件
Code_Thinking的专栏
10-12 994
当页面加载时会触发onload事件,同时
Onunload，onbeforeunload作用，调用时机
奋斗码农的博客
03-30 2518
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 　　Onbeforeunload也是在Onunload，onbeforeunload或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将
js之onload事件
BLUEBONE的专栏
06-18 1219
说明：测试浏浏览器FF3.5.2、Chrome3.0、safar 4.0.3、opera10.10、IE7　　如果我问你window.load和window.onload分别是什么意思，恐怕你会回答我：“这不是页面加载完就执行吗”。　　但是答案是不一定，得看你怎么用。看一下例子吧例1：Untitledfunction ShowMessage(){alert("true");}w
js当中onunload 事件
12-30 786
定义和用法 onunload 事件在用户退出页面时发生。 语法 onunload="SomeJavaScriptCode" 参数 描述 SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。 支持该事件的 HTML 标签： , 支持该事件的 JavaScript 对象： window 实例 在本例中，在页面关
JS基础
weixin_44645309的博客
01-04 92
1、基本数据类型：undefine（声明了但未赋值，eg：var a;）、Number、String、Boolean、null 2、获取字符串a的长度：a.length 3、获取a的类型：typeof a 4、转为字符串：a.toString()或String(a)。区别在于，若a为null，String(a)会返回null，而a.toString()会报错 5、转为数字：parseInt(‘3’)、parseFloat(‘3.13’)、Number(‘2.3’)；区别在于Number()转换的内容带有非数
js零基础：
qq_34331669的博客
07-10 251
javascript没有方法，只有函数 javascript在编译时就运行，运行时就编译   DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。   1、您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。           2、警告框： alert("警告框");     function
js中window.onload
06-11
在 JavaScript 中，`window.onload` 是一个事件，它表示当整个页面及其所有资源（如图像、样式表、脚本等）都已完全加载时触发的事件。它通常用于在页面加载完成后执行某些操作，例如修改页面元素、向服务器发送请求等。 可以通过以下方式来使用`window.onload`事件： ```javascript window.onload = function() { // 在这里编写需要执行的代码 }; ``` 这段代码将在整个页面及其所有资源都已加载完成后执行。注意，如果你在页面中同时使用多个`window.onload`事件，它们可能会相互覆盖，导致只有最后一个事件被触发。因此，最好只使用一个`window.onload`事件来确保代码的可靠性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值