JavaScript—BOM（confirm、prompt、open、history、location）

最新推荐文章于 2022-10-04 23:35:43 发布

九阈

最新推荐文章于 2022-10-04 23:35:43 发布

阅读量530

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46048542/article/details/122796912

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

系统对话框
window 方法（一般情况下window可以省略)
alert()弹出对话框
confirm()弹出一个带确定和取消的提示框
举个列子
（1）

 alert("hello");

跟下面一样

   window.alert("hello");

（2）

    <script>
        var num = 10;
        alert(num);
    </script>

跟下面一样

    <script>
        var num = 10;
        alert(window.num);
    </script>

（3）

    <script>
        function show(){
            alert("hello world");
        }
        window.show();
    </script>

跟下面一样

   <script>
        function show(){
            alert("hello world");
        }
        show();
    </script>

confirm实例

    <script>
        var res = confirm("你确定要离开吗?");
        alert(res);
    </script>

请添加图片描述

请添加图片描述
点击取消则出现false
prompt()弹出一个带输入框的提示框

   prompt()弹出一个带输入框的提示框
        参数：
        第一个参数：面板上显示的内容
        第二个参数：输入框里面的默认（可以不传入）
        返回值：点击确定，返回输入框中的内容
        点击取消，返回null

    <script>
        var res = prompt("请输入内容", 100);
        alert(res);
    </script>

请添加图片描述
open()

     open()
        第一个参数：跳转的URL，打开一个新窗口，加载URL
        第二个参数：字符串，给打开的窗口起一个名字
        第三个参数：一串特殊含义的字符串，
        可以控制打开窗口的属性

窗口属性以下（有些浏览器不支持）
请添加图片描述

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function btnClick(){
            open("http://baidu.com","xxx",'width=400,height=400,top=200,left=300',scrollbars='yes');
        }
    </script>
</head>
<body>
    <button οnclick="btnClick();">打开窗口</button>
</body>
</html>

效果：点击打开窗口按钮出现下面
请添加图片描述 history对象

     history 对象 window.history 掌管的是当前窗口
    （注意不是浏览器）历史记录（只要加载url不一样就会产生历史记录）
        属性 
        history.length 输出当前窗口历史记录的条数
        方法
        history.back()返回上一条历史记录
        history.forward()前进到下一条历史记录
        history.go()
        参数： 0 刷新当前页面
        正整数  前进n条 记录
        负整数  后退n条记录

<body>
    <button οnclick="alert(history.length);">获取历史记录的条数</button>
    <button οnclick="history.back();">back</button>
    <button οnclick="history.forward();">forward</button>
    <button οnclick="history.go(2);">go</button>
</body>

请添加图片描述
location对象
location对象的属性

        url:统一资源 定位符
        完成的url:
        中文版本 协议://主机名：端口号/路径/?查询字符串#锚点
        英文版本 protocol://hostname:port/pathname/?search#hash
        location.protocol  file:本地磁盘文件访问
                           http:
                           https:(证书认证协议)
        location.hostname 主机名 IP(在全球范围内找到你当前网络的地址)
                                 域名：就是IP的别称
        location.port  端口号（默认隐藏的）
        【注】是当前电脑使用网络的软件，随机给他分配一个编号 0~65535
        hostname:port 可以直接定位到当前使用网络的程序
        小细节：浏览器 8080   http  80  https  443
        location.pathname 路径
        location.search 查询字符串（前后端交互）
        ?name1=value1&name2=value2
        location.hash 锚点

请添加图片描述

举个列子

    <script>
        alert(location.protocol);
        alert(location.hostname);
        alert(location.pathname);
        alert(location.search);
        alert(location.hash);
        alert(location);
        alert(location.href);//整个URL
    </script>

location对象的方法
请添加图片描述

        location  地址栏
        方法：
        location.assign(url)
        [注]在当前窗口跳转到这个URL
        location.replace(url)
        [注]在当前窗口替换成新的url,不会产生历史记录
        location.reload()
        [注]刷新窗前窗口
        location.reload(true)不经过浏览器缓存强制从服务器重载

代码展示

<body>
    <button οnclick="location.assign('https://www.baidu.com')">assign</button>
    <button οnclick="location.replace('https://www.baidu.com')">replace</button>
    <button οnclick="location.reload(true)">reload</button>
</body>

请添加图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—BOM（confirm、prompt、open、history、location）

系统对话框window 方法（一般情况下window可以省略)alert()弹出对话框confirm()弹出一个带确定和取消的提示框举个列子（1） alert("hello");跟下面一样 window.alert("hello");（2） <script> var num = 10; alert(num); </script>跟下面一样 <script> var num
复制链接

扫一扫

专栏目录