JavaScript基础04 - BOM编程

JavaScript基础04

  • 001-BOM编程
  • 002-open
  • 003-弹出消息框和确认框
  • 004-将当前窗口设置为顶级窗口
  • 005
  • 006-history对象
  • 007
  • 008-设置浏览器地址栏上的URL

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>closetitle>
    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>005title>
    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>007title>
    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>设置浏览器地址栏上的URLtitle>
    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>



你可能感兴趣的:(javascript,前端,html)