【JavaScript】——兼容浏览器的居中显示+关闭页面

缺乏、安全感 2022-08-23 05:41 157阅读 0赞

# **前提** #

小编最近正在学习一门新的语言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不再像学习的时候感到那么厌烦，这门语言越来越神奇。虽然这是些简单的效果，但是心里看着还是高兴的，学习路途很长，慢慢积累，进步!