js- BOM

BOM:Browser Object Model 浏览器对象模型

open(页面的地址url,打开的方式)方法 打开一个新的窗口(页面)

    如果url为空,则默认打开一个空白页面

    如果打开方式为空,默认为新窗口方式打开

返回值:返回新打开的窗口的window对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var aInput = document.getElementsByTagName('input');
                aInput[0].onclick = function(){
                    window.open();
                }

            }
        </script>
    </head>
    <body>
        <input type="button" value="打开新窗口" />
    </body>
</html>

aInput[0].onclick = function(){
          window.open('http://www.baidu.com','_self');
 }

打开的新窗口,可以对新窗口进行操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var aInput = document.getElementsByTagName('input');
                aInput[0].onclick = function(){
                    opener = window.open();
                    opener.document.body.style.background = 'red';
                }

            }
        </script>
    </head>
    <body>
        <input type="button" value="打开新窗口" />
    </body>
</html>

close()方法 关闭窗口

aInput[1].onclick = function(){
                    window.close();
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="打开新窗口" />
        <input type="button" value="关闭新窗口" />
    </body>

注意:1、火狐:默认无法关闭

           2、chrome:直接关闭

           3、ie:询问用户

可以关闭在本窗口中通过js方法打开的新窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var aInput = document.getElementsByTagName('input');
                aInput[0].onclick = function(){
                    opener = window.open();
                    opener.document.body.style.background = 'red';
                }
                aInput[1].onclick = function(){
                    window.close();
                }
                aInput[2].onclick = function(){
                    opener.close();
                }

            }
        </script>
    </head>
    <body>
        <input type="button" value="打开新窗口" />
        <input type="button" value="关闭窗口" />
        <input type="button" value="关闭新窗口" />
    </body>
</html>

window.navigator.userAgent->浏览器信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            alert(window.navigator.userAgent);
        </script>
    </head>
    <body>
    </body>
</html>

window.location:浏览器地址信息   是一个对象

window.location.href   ===  window.location  (地址栏地址信息)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            alert(window.location);
        </script>
    </head>
    <body>
    </body>
</html>

window.location.search:url?后面的内容

window.location.hash:url#后面的内容

猜你喜欢

转载自blog.csdn.net/qq_35187942/article/details/85921220