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 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
js实现简单进度条效果
Mar 25 Javascript
JS实现4位随机验证码
Oct 19 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
PHP Array交叉表实现代码
2010/08/05 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
简单学习vue指令directive
2016/11/03 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python实现多进程的四种方式
2019/02/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
电钳专业个人求职信
2014/01/04 职场文书
运动会口号大全
2014/06/07 职场文书
中层干部培训方案
2014/06/16 职场文书
七一建党节慰问信
2015/02/14 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers