JS关闭窗口时产生的事件及用法示例


Posted in Javascript onAugust 20, 2016

本文实例讲述了JS关闭窗口时产生的事件及用法。分享给大家供大家参考,具体如下:

/************ 关闭窗口,提交评价 **************/
window.onbeforeunload = function(){
   var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth);
   var pageHeight = Math.max(window.top.document.body.scrollHeight, window.top.document.documentElement.scrollHeight);
   var cltHeight = Math.max(window.top.document.body.clientHeight, window.top.document.documentElement.clientHeight);
   var width = 400 ;
   var height = 200 ;
   var layer = window.top.document.getElementById("zz_layer");
   if (layer != null) {
   layer.parentNode.removeChild(layer);
   }
   // 遮罩层
 var layer= window.top.document.createElement("div");
 layer.id = "zz_layer";
 layer.style.filter = "alpha(opacity=38)";//ie
 layer.style.opacity = "0.38";//ff
 layer.style.width = pageWidth + "px";
 layer.style.height = pageHeight + "px";
 layer.style.position= "absolute";
 layer.style.top = 0;
 layer.style.left = 0;
 layer.style.backgroundColor = "#000";
 layer.style.zIndex = "9998";
 window.top.document.body.appendChild(layer);
 // 评价窗口
 var newbox = document.getElementById("KF_PJ_DIV");
 newbox.style.zIndex = "9999";
 newbox.style.display = "block";
 newbox.style.width = width + "px";
 newbox.style.height = height + "px";
 newbox.style.border = "#565656 4px solid";
 newbox.style.background = "#FFFFFF";
 newbox.style.position = "absolute";
 newbox.style.left = pageWidth/2 + "px";
 newbox.style.top = (cltHeight/2) + "px";
 if(height/2 > (cltHeight/2)){
  newbox.style.marginTop = ( - (cltHeight/2)) + "px";
 }else{
  newbox.style.marginTop = ( - height/2) + "px";
 }
 if(width/2 > (pageWidth/2)){
  newbox.style.marginLeft = ( - (pageWidth/2)) + "px";
 }else{
  newbox.style.marginLeft = ( - width/2) + "px";
 }
   return "您尚未对客服服务作出评价,请点击‘取消'评分!";
  };
  function mydiv_resize(){
  var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth);
   var pageHeight = Math.max(window.top.document.body.scrollHeight, window.top.document.documentElement.scrollHeight);
   var cltHeight = Math.max(window.top.document.body.clientHeight, window.top.document.documentElement.clientHeight);
   var cltWidth = Math.max(window.top.document.body.clientWidth, window.top.document.documentElement.clientWidth);
   var width = 400 ;
   var height = 200 ;
  var layer = window.top.document.getElementById("zz_layer");
   if (layer != null) {
   // 遮罩层
  layer.style.width = pageWidth + "px";
  layer.style.height = pageHeight + "px";
   }
 // 评价窗口
 var newbox = document.getElementById("KF_PJ_DIV");
 newbox.style.left = cltWidth/2 + "px";
 newbox.style.top = (cltHeight/2) + "px";
 if(height/2 > (cltHeight/2)){
  newbox.style.marginTop = ( - (cltHeight/2)) + "px";
 }else{
  newbox.style.marginTop = ( - height/2) + "px";
 }
 if(width/2 > (pageWidth/2)){
  newbox.style.marginLeft = ( - (pageWidth/2)) + "px";
 }else{
  newbox.style.marginLeft = ( - width/2) + "px";
 }
}
window.onresize = mydiv_resize;

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
canvas绘制七巧板
Feb 03 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
js实现下一页页码效果
Mar 07 Javascript
vue.js实例todoList项目
Jul 07 Javascript
three.js实现圆柱体
Dec 30 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 #Javascript
浅谈angular懒加载的一些坑
Aug 20 #Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
js显示动态时间的方法详解
Aug 20 #Javascript
javascript数字验证的实例代码(推荐)
Aug 20 #Javascript
You might like
967 个函式
2006/10/09 PHP
php验证session无效的解决方法
2014/11/04 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
详解Vue之计算属性
2020/06/20 Javascript
Python实现二分法算法实例
2015/02/02 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python中subprocess批量执行linux命令
2018/04/27 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
实习生求职自荐信
2014/02/07 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
岳麓书院导游词
2015/02/03 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Python 线程池模块之多线程操作代码
2021/05/20 Python
Python面向对象之成员相关知识总结
2021/06/24 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android