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 ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python多继承顺序实例分析
2018/05/26 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Python最小二乘法矩阵
2019/01/02 Python
简单了解Python生成器是什么
2019/07/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
keras之权重初始化方式
2020/05/21 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
警校毕业生自我评价
2014/04/06 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
房产公证书格式
2015/01/26 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
后勤工作个人总结
2015/02/28 职场文书
工作自我评价范文
2015/03/05 职场文书
六年级作文之自救
2019/12/19 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Python必备技巧之函数的使用详解
2022/04/04 Python