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获取input的value问题说明
Aug 19 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
html5中sharedWorker实现多页面通信的示例代码
May 07 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php-fpm配置详解
2014/02/12 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP多态代码实例
2015/06/26 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
解析js如何获取css样式
2016/12/11 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python3实现简单飞机大战
2020/11/29 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
《悯农》教学反思
2014/04/28 职场文书
演讲稿格式
2014/04/30 职场文书
三方协议书
2015/01/27 职场文书
导游词之峨眉山
2019/12/16 职场文书
python垃圾回收机制原理分析
2022/04/13 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers