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权威指南 学习笔记之null和undefined
Sep 25 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
微信开发 微信授权详解
Oct 21 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
JavaScript 数组去重详解
Sep 15 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP在线书签系统分享
2016/01/04 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
pytorch 模型可视化的例子
2019/08/17 Python
python中bytes和str类型的区别
2019/10/21 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
python实现单机五子棋
2020/08/28 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
团员个人的自我评价
2013/12/02 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python