JavaScript45-47： BOM编程

最新推荐文章于 2024-06-04 23:21:26 发布

高开低走。

最新推荐文章于 2024-06-04 23:21:26 发布

阅读量119

点赞数

分类专栏：锦到说JavaScript

本文链接：https://blog.csdn.net/qq_43568982/article/details/117459350

版权

锦到说JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始时间：2021-06-01

window.open 和close

open用来跳转页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BOM编程</title>
</head>

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

    </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('file:///E:/%E7%BC%96%E7%A8%8B%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/Html/20210602_Test01.html','_blank');"/>
    
</body>
</html>

也可以用close来关闭页面

<input type="button" value="关闭自建页面" onClick="window.close();"/>

消息框和确认框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>消息框和确认框</title>
</head>

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

在这里插入图片描述

历史记录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跳转</title>
</head>

<body>
    <script type="text/javascript">  
    </script>
    <!--当之前的页面链接到此页，且是在self页面上链接的，可以点击history.back回到刚才界面-->
    <input type="button" value="后退到上一界面" onClick="window.history.back()"/>
     <!--go(-1)等价-->
    <input type="button" value="后退到上一界面" onClick="window.history.go(-1)"/> 
    
</body>
</html>

设置URL栏

<!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";
        //下面这两段代码和上面等价
        /*
        document.location.href="http://www.baidu.com";
        document.location="http://www.baidu.com";
        */
    }
    </script>
    <input type="button" value="跳转到百度" onClick="goBaidu();"/>
</body>
</html>

常见的给服务器发送请求的方法
总结，有哪些方法可以通过浏览器往服务器发请求?
1、表单form的提交。
2、超链接。
3、document. location
4、window.location
5、 window.open(“url”)
通过表单提交才是动态的

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

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

<body>
    <script type="text/javascript">
    function goTop(){
        if(window.top!=window.self){
            window.top.location=window.self.location;
        }
    }
    </script>
    <input type="button" value="设置为顶级窗口" onClick="goTop();"/>
</body>
</html>