JavaScript基础04 - BOM编程

001-BOM编程

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BOM编程</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
                1、BOM编程中,window对象是顶级对象,代表浏览器窗口。
                2、window有open和close方法,可以开启窗口和关闭窗口。

             */
        </script>
        <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');"/>
        <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self');"/>
        <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');"/>
        <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent');"/>
        <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top');"/>

        <input type="button" value="打开表单验证" onclick="window.open('002-open.html')"/>
    </body>
</html>

002-open

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>close</title>
    </head>
    <body>
        <input type="button" value="关闭当前窗口" onclick='window.close()';/>
    </body>
</html>

003-弹出消息框和确认框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹出消息框和确认框</title>
    </head>
    <body>

        <script type="text/javascript">
            function del(){
      
      
                /*var ok = window.confirm("亲,确认删除数据吗?");
                //alert(ok);
                if(ok){
                    alert("del data...");
                }*/
                if(window.confirm("亲,确认删除数据吗?")){
      
      
                    alert("del data...");
                }
            }
        </script>

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

004-将当前窗口设置为顶级窗口

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>将当前窗口设置为顶级窗口</title>
    </head>

    <body>
        <script type="text/javascript">
            /*
                如果当前窗口不是顶级窗口的话,将当前窗口设置为顶级窗口。
             */
        </script>

        <iframe src="005.html" width="500px" height="500px"> </iframe>
    </body>

</html>

005

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>005</title>
    </head>
    <body>
        005页面<br>
        <script type="text/javascript">
            /*
                如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口。
             */
            function setTop(){
      
      
                // window是当前浏览器窗口,代表005.html
                // 当前窗口的顶级窗口如果不是自己
                // window.top就是当前窗口对应的顶级窗口
                // window.self表示当前自己这个窗口
                // window.top就是004窗口
                // window.self是005窗口
                console.log(window.top != window.self);
                if(window.top != window.self){
      
      
                    // 将当前窗口设置为顶级窗口
                    // window.self.location 是005的地址
                    // 将顶级窗口的window.top.location地址设置为005
                    window.top.location = window.self.location;
                }
            }
        </script>
        <input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话,将当前窗口设置为顶级窗口"/>



    </body>
</html>

006-history对象

<!DOCTYPE html>
<html lang="en">

    <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>

007

<!DOCTYPE html>
<html lang="en">
    <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>

008-设置浏览器地址栏上的URL

<!DOCTYPE html>
<html lang="en">

    <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.herf = "http://www.baidu.com";
                // window.location = "http://www.126.com";

                //document.location.href = "http://www.sina.com.cn";
                document.location = "http://www.sina.com.cn";
            }
        </script>
        <input type="button" value="新浪" onclick="goBaidu()"/>

        <input type="button" value="百度" 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,然后回车。(这个也可以手动输入,提交的数据也可以成为动态的。)
            比如地址栏上直接输入:http://www.jd.com/login.do?username=zhangsan&password=123
        以上所有的请求方式均可以携带数据给服务器,只有通过表单提交的数据才是动态的。
-->

猜你喜欢

转载自blog.csdn.net/weixin_43636084/article/details/130141341