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拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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 5.0创建图形的巧妙方法
2010/10/12 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP中使用curl入门教程
2015/07/02 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
python生成器的使用方法
2013/11/21 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
Python与R语言的简要对比
2017/11/14 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python函数的作用域及关键字详解
2019/08/20 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
学院领导推荐信
2013/10/30 职场文书
历史学专业推荐信
2013/11/06 职场文书
绿色学校实施方案
2014/03/31 职场文书
司机工作自我鉴定
2014/09/19 职场文书
党员进社区活动总结
2015/05/07 职场文书
飞屋环游记观后感
2015/06/08 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS