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学习笔记8 用JSON做原型
Jan 11 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
js读取配置文件自写
Feb 11 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
原生js实现无缝轮播图
Jan 11 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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
use jscript List Installed Software
2007/06/11 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
js常用代码段收集
2011/10/28 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python模块的加载讲解
2019/01/15 Python
Python地图绘制实操详解
2019/03/04 Python
python设置环境变量的原因和方法
2019/06/24 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
绿色环保家庭事迹材料
2014/08/31 职场文书
工程部岗位职责
2015/02/10 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS