JavaScript/BOM编程

最新推荐文章于 2024-07-01 20:30:00 发布

fan__lee

最新推荐文章于 2024-07-01 20:30:00 发布

阅读量213

点赞数

分类专栏：前端笔记文章标签： 1024程序员节 javascript BOM

本文链接：https://blog.csdn.net/fan__lee/article/details/109255953

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的浏览器对象模型(BOM)操作，包括window对象的使用，如打开和关闭窗口；消息框和确认框的弹出；历史记录的前进和后退；以及设置URL的方法。此外，还探讨了通过服务器向浏览器发送请求的多种方式，如表单提交、超链接、document.location等，并讨论了它们之间的动态与静态特性。同时，还涉及了如何确保子窗口成为顶级窗口的技巧。

摘要由CSDN通过智能技术生成

文章目录

1、在BOM编程中，window对象是顶级对象，代表浏览器窗口。
2、window有open和close方法，可以开启窗口和关闭窗口。
如：

    <body>
        <script type="text/javascript">

        </script>
<!--        open('url','参数')：
        参数可以是：_self  当前窗口
                  _blank 新窗口
                  _parent 父窗口
                  _top  顶级窗口-->
        <input type="button" value="开启百度(新窗口)" onclick="window.open('https://blog.csdn.net/fan__lee/category_10358295.html')"/>
        <input type="button" value="开启百度(当前窗口)" onclick="window.open('https://blog.csdn.net/fan__lee/category_10358295.html','_self')"/>

        <input type="button" value="表单验证" onclick="window.open('../作业.html')">
        <input type="button" value="关闭页面" onclick="window.close()">
    </body>

弹出消息框和确认框

    <body>
        <script type="text/javascript">
            function del(){
                var ok = window.confirm("亲。确认删除数据吗？")
                if (ok){
                    alert("数据已删除");
                }
            }
        </script>
        <input type="button" value="弹出消息框" onclick="window.alert('消息框')">
<!--        删除要确认-->
        <input type="button" value="弹出确认框" onclick="del();">
    </body>

历史记录/前进、后退

回退：

window.history.back();
window.history.go(-1);

'界面1'
    <body>
        <a href="./007.html">007界面</a>
    </body>
'007界面'
    <body>
        007 page!
        <input type="button" value="后退" onclick="window.history.back()">
        <input type="button" value="后退" onclick="window.history.go(-1)">
    </body>

设置地址栏上的URL

    <body>
        <script type="text/javascript">
            function gobaidu(){
                //第一种
                //var locationObj = window.location;
                //locationObj.href = "https://blog.csdn.net/fan__lee/category_10358295.html";
                //第二种
                //window.location.href = "https://blog.csdn.net/fan__lee/category_10358295.html";

                //第三种
                //window.location = "https://blog.csdn.net/fan__lee/category_10358295.html";

                //第四种：
                //document.location.href = "https://blog.csdn.net/fan__lee/category_10358295.html";
                document.location = "https://blog.csdn.net/fan__lee/category_10358295.html";

            }
        </script>
        <input type="button" value="开启百度(新窗口)" onclick="gobaidu();"/>
    </body>

总结有哪些方法可以通过服务器往浏览器发请求

1、表单form的提交
2、超链接
3、document.location
4、window.location
5、window.open('url')
6、直接在浏览器输入URL,然后回车
   但是，以上只有表单和直接输入URL是动态的，其他都是通过设置地址栏的方式传递信息给服务器，都是静态的

窗口问题

在这里插入图片描述此时如果当前窗口不是顶级窗口，就把他设置为顶级窗口：

function setTop(){
	if(window.top !=window.self){
	window.top.location = window.self.location;
	
}
}


然后设置onclick = "setTop();"

fan__lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录