【JavaScript】——兼容浏览器的居中显示+关闭页面
2017-10-13 00:00
197 查看
前提
小编最近正在学习一门新的语言JavaScript,话说看了一些教程视频,虽然跟着视频中的老师也实践了一下内容,但是现在真正在项目中去做些东西还是有些困难的。所以利用这次的项目机会把一些东西总结下来,同时也想分享给大家,一起进步啊。居中显示
在平时浏览一些网站时可能需要一个登陆界面。在这个项目中实现的就是随着窗体页面的改变,登陆提示框一直处于居中状态。其实这个东西分为两部分,一是在加载的时候显示居中,二是在触动页面是随时改变。#JavaScript #登陆框div的改变事件——贾文静——2016年6月8日12:00:25 var Change = function () { var windowScreen = document.documentElement; // 获取main的div元素 var main_div = document.getElementById("Login"); // 通过窗口宽高和div宽高计算位置 var main_left = (windowScreen.clientWidth - main_div.clientWidth) / 2 + "px"; var main_top = (windowScreen.clientHeight - main_div.clientHeight) / 2 + "px"; // 位置赋值 main_div.style.left = main_left; main_div.style.top = main_top; }
#JavaScript #窗体的加载事件——贾文静——2016年6月8日12:02:25 window.onload = function () { //调用div的改变事件 Change(); } #浏览器触发,随时改变大小——贾文静——2016年6月8日12:04:54 window.onresize = function () { Change(); }
关闭界面
页面的关闭事件也是我们会经常用到的,其实这个过程也非常简单,但是里面会涉及一个浏览器兼容的问题,浏览器的不同,让这个方法有点小麻烦,但是还是非常好实现的。#JavaScript #兼容浏览器的关闭+贾文静+2016年6月8日12:08:54 function Close() { if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { window.opener = null; window.close(); } else { window.open('', '_top'); window.top.close(); } } else if (navigator.userAgent.indexOf("Firefox") > 0) { window.location.href = 'about:blank '; //火狐默认状态非window.open的页面window.close是无效的 } else { window.opener = null; window.open('', '_self', ''); window.close(); } }
总结
虽然学习了一些关于JavaScript的教程材料,但是大部分还是仅仅停留于看啊,很少动手去做些东西,所以现在真正用起来还是眼高手低。通过这次动手去做些东西,觉得JavaScript不再像学习的时候感到那么厌烦,这门语言越来越神奇。虽然这是些简单的效果,但是心里看着还是高兴的,学习路途很长,慢慢积累,进步!相关文章推荐
- 【JavaScript】——兼容浏览器的居中显示+关闭页面
- JavaScript 页面后退几个浏览器不兼容问题
- Javascript页面跳转与浏览器兼容
- javascript关闭弹出窗口时刷新父窗口和居中显示弹出窗
- 使用javascript代码无提示关闭浏览器窗口(兼容IE与火狐)
- 确认是否关闭浏览器或转到其它页面(JavaScript)
- JavaScript得到鼠标指针相对于浏览器页面(或客户区)的水平坐标(兼容ie,ff)
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
- js兼容多浏览器的关闭当前页面
- 关闭子页面刷新父页面时候,Firefox 必须发送将会导致重复之前动作的数据(例如搜索或者下订单)。 ie提示:若要再次显示该页面,web浏览器需要重新发送您以前提交的信息
- 如何在javascript中捕获浏览器关闭按钮或退出页面的事件
- Javascript关闭浏览器或页面时触发…
- JavaScript 判断 Chrome 内核的 360 浏览器(关闭页面并提示)
- Javascript判断用户离开当前页面或关闭浏览器并给出提示
- Jquery 浏览器页面窗口刷新或关闭时,执行后台方法(兼容各主流浏览器)
- JavaScript无提示关闭当前页面窗口,兼容IE/Firefox/Chrome (Close the current page window without confirm by JavaScript, support all browsers)
- javascript取窗口的可视高度和页面的内容高度 兼容所有浏览器
- javascript关闭弹出窗体时刷新父窗体和居中显示弹出窗
- javaScript实现在浏览器状态栏显示鼠标在页面中的当前位置
- javascript 获取多种主流浏览器显示页面高度(转)