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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jquery分割字符串的方法
Jun 24 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
Bootstrap布局方式详解
May 27 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
django实现分页的方法
2015/05/26 Python
python如何获取服务器硬件信息
2017/05/11 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python groupby 函数 as_index详解
2019/12/16 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
小学新学期教师寄语
2014/01/18 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年安全员工作总结
2014/11/13 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
烟台的海导游词
2015/02/02 职场文书
建党伟业观后感
2015/06/01 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
吃通javascript正则表达式
2021/04/21 Javascript