1、open和close

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>BOM编程-open和close</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、BOM编程中，window对象是顶级对象，代表浏览器窗口。
  11.                 2、window有open和close方法，可以开启窗口和关闭窗口。
  12.             */
  14.         </script>
  16.         <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
  17.         <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" />
  18.         <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" />
  19.         <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" />
  20.         <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
  22.         <input type="button" value="打开表单验证"  onclick="window.open('002-open.html')"/>
  23.     </body>
  24. </html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>close</title>
    </head>
    <body>
        <input type="button" value="关闭当前窗口" onclick="window.close();" />
    </body>
</html>

2、弹出消息框和确认框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>弹出消息框和确认框</title>
    </head>
    <body>
        <script type="text/javascript">
            function del(){
                /*
                var ok = window.confirm("亲，确认删除数据吗？");
                //alert(ok);
                if(ok){
                    alert("delete data ....");
                }
                */
                if(window.confirm("亲，确认删除数据吗？")){
                    alert("delete data ....");
                }
            }
        </script>
        <input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />

        <!--删除操作的时候都要提前先得到用户的确认。-->
        <input type="button" value="弹出确认框(删除)" onclick="del();" />
    </body>
</html>

3、history和location对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>history对象</title>
    </head>
    <body>
        <a href="007.html">007页面</a>
        <input type="button" value="前进" onclick="window.history.go(1)"/> 
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>007</title>
    </head>
    <body>
        007 page!
        <input type="button" value="后退" onclick="window.history.back()" />
        <input type="button" value="后退" onclick="window.history.go(-1)" />
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置浏览器地址栏上的URL</title>
    </head>
    <body>

        <script type="text/javascript">
            function goBaidu(){
                //var locationObj = window.location;
                //locationObj.href = "http://www.baidu.com";

                // window.location.href = "http://www.jd.com";
                // window.location = "http://www.126.com";

                //document.location.href = "http://www.sina.com.cn";
                document.location = "http://www.tmall.com";
            }
        </script>

        <input type="button" value="新浪" onclick="goBaidu();"/>

        <input type="button" value="baidu" onclick="window.open('http://www.baidu.com');" />

    </body>
</html>

<!--
    总结，有哪些方法可以通过浏览器往服务器发请求？
        1、表单form的提交。
        2、超链接。<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
        3、document.location
        4、window.location
        5、window.open("url")
        6、直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）

        以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->

4、设置当前窗口为顶级窗口

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>当前窗口设置为顶级窗口</title>
        <!--窗体-->
        <!-- <frameset cols="30%,*">
            <frame src="http://www.baidu.com" />
            <frame src="005-child-window.html" />
        </frameset> -->
    </head>
    <body>

        <!--在当前窗口中隐藏的内部窗体。-->
        <!-- <iframe src="http://www.baidu.com"></iframe> -->

        <iframe src="005-child-window.html"></iframe>

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>child-window</title>
    </head>
    <body>
        child window.
        <script type="text/javascript">
            window.onload = function(){
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    if(window.top != window.self){
            // 将当前窗口的地址设置成顶级窗口地址
                        window.top.location = window.self.location;
                    }
                }
            }
        </script>
        <input type="button" value="将当前窗口设置为顶级窗口" id="btn" />
    </body>
</html>

1.png