JavaScript DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/CongJiYong/article/details/108738547

本文介绍了如何使用JavaScript进行网页交互，包括提示框的使用、窗口操作及导航控制等。详细解释了alert、confirm和prompt的功能，并展示了window.open、location对象及history对象的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三种提示框

<script>
        /*
            浏览器可以通过调用系统对话框，向用户显示信息。
            系统提供了三个函数，可以完成系统对话款的操作
        */
        /*
        alert()
        windows 下的函数,都可以省略window直接取调用

        */
        window.alert("提示框");
        /*
            confirm()
            【功能】但出一个带有确定和取消的警告窗
            【返回值】如果点击确定，返回true
                     如果点击取消，返回false
        */
        var res = confirm("请选择确定和取消");
        alert(res);

        /*
            prompt()
            【功能】弹出一个带输入显示的内容
            【参数】第一个参数：要在提示框上显示的内容
                    第二个参数：输入框内默认的值
            【返回值】点击确定：返回值是输入的内容
                    点击取消：返回值是null
        */
        res = prompt("输入一个数", 10);
        alert(res);
    </script>

window.open()

    <script>
        /*
        window.open()
        open
        1、要加载URL
        2、要加载的名称或者窗口的目标
        3、一串具有特殊意义的字符串

        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                open("http://www.baidu.com");
                //【注】如果只有一个参数，调用open方法会打开新的串口
                open("http://www.baidu.com", "百度");
                //【注】第二个参数是给打开的新窗口起一个名字，然后以后再去添加url,就在这个已经起好名字的目标串口加载url
                //就是不会在打开新的窗口
                open("http://www.baidu.com", "百度", "width=400,height=400;top=200,left=200");
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">

</body>

子窗口调用父窗口

   <script>
        //父窗口打开子窗口
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {

                open("sub.html", "子窗口");

            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>

    <script>
    //子窗口调用父窗口
        /*
            opener 打开当前窗口的父窗口window对象
            IE不支持该对象
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert(opener); //opener
                opener.document.write("子窗口操作父窗口");
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>

location对象

 <script>
        alert(window.location);
        alert(location);
        alert(window.document.location);
        alert(window.location == window.document.location);
        /*
            location我们浏览器上面的地址栏输入框
            【注】它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能
        
        */
        /*  

        location对象的属性

        url 统一资源定位符（快递包上一个地址）
        */
        /*
            location.hash 锚点 1#实现页内跳转


        */
        alert(location.hash);
        window.onload = function () {
            document.onclick = function () {
                location.hash = "#3";
            }
        }
        /*
            host 主机名：端口号 浏览器的端口号 默认8080
            IP通过IP我们可以在全球范围内，找到我这台电脑所使用的网络的地址，使用网络的软件，在当前电脑内唯一的标识。
        */
        /*
             hostname 主机名 域名/IP

        */
        alert(location.hostname);
        /*
            href 整个url 本页面的地址
        
        */
        alert(location.href);
        /*
        pathname 路径名
        */
        alert(location.pathname);
        // port 端口号
        //protocal 协议   使用的是http协议
        //http:网络协议  file:本地文件协议
        alert(location.protocol);
        /*
            search 查询字符串
            跟在地址?后面的字符
            ?username=XXX&age=18

        */
        alert(location.search);
        window.onload = function () {
            document.onclick = function () {
                location.search = "?xx=yyy&age=18";
            }
        }
        /*
            url 统一资源定位符
            protocol(协议):host(主机名):port(端口号)/pathname(路径)?查询字符串(search)#锚点(hash)
            http://www.baidu.com:8080/code/xxx.html?username=xxx&age=18#1
        */
    </script>

location对象的方法

   <script>
        /*
        
        assign()  跳转到指定的url
        
        reload()  重载当前的url
        如果传参，参数为true的时候，强制加载，从服务器源头进行重新加载，防止浏览器缓存，更新延迟

        replace() 用新的URL替换当前页面，可以避免产生跳转前的历史记录，浏览器没有返回按钮
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                location.assign("http://www.baidu.com");
                location.reload();
                location.reload("http//www.baidu.com");
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>

history对象

  <script>
        /*
            history是window对象的属性，他保存这个用户上网的记录
            属性
            history.length  返回当前history对象中记录数
            历史记录的条数
            方法
            history.back()  返回上一条历史记录，类似于后退
            history.forword();前进到下一条历史记录，类似前进
            history.go()
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert(history.length); //当前界面的历史纪录条数
            }
            var oForword = document.getElementById("forward");
            oForword.onclick = function () {
                history.forward();
            }
            var oBack = document.getElementById("back");
            oBack.onclick = function () {
                history.back();
            }
            var gGo = document.getElementById("go");
            gGo.onclick = function () {
                history.go(-1); //参数 0 1 -1

            }

        }
    </script>
</head>

<body>
    <input type="button" value="安" id="btn">
    <input type="button" value="前进" id="forward">
    <input type="button" value="后退" id="back">
    <input type="button" value="go" id="go">
</body>