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 到 JQuery (1)学习小结
Feb 12 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
jquery ui对话框实例代码
May 10 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
javascript实现倒计时效果
Feb 17 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 验证码的实现代码
2011/07/17 PHP
PHP 代码规范小结
2012/03/08 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
详解Python中的日志模块logging
2015/06/19 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
用python发送微信消息
2020/12/21 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
历史学专业推荐信
2013/11/06 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
委托书模板
2014/04/04 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
七年级数学教学反思
2016/02/17 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python基于opencv批量生成验证码的示例
2021/04/28 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL