09BOM(Browser Object Model)对象

最新推荐文章于 2024-06-27 08:35:20 发布

qq_43086874

最新推荐文章于 2024-06-27 08:35:20 发布

阅读量133

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/qq_43086874/article/details/104861206

版权

js基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述
BOM(Browser Object Model) 浏览器对象模型
浏览器可以通过调用系统对话框,向用户显示信息
系统提供了三个函数,可以完成系统对话框的操作

系统对话框

注: window下的函数 ,都可以省略window直接去调用

alert() 功能:直接弹出警告框 ;
参数:警告框上显示的内容

alert("警告")

**confirm() 功能:**弹出一个带有确定和取消按钮的警告框
返回值:如果点击确定,返回true,如果点击取消返回false

var res=confirm("请选择确定和取消")
console.log(res)

**prompt() 功能:**弹出一个带有输入框的提示框
参数:
第一个参数:要在提示框上显示的内容
第二个参数:输入框内默认的值
返回值:
如果点击确定,返回输入的内容,
如果点击取消返回null

var d=prompt("请输入数字",);
console.log(d);

open (url,name)方法

1 要加载的URL
2 串钩的名称或者窗口的目标
3 一串具有特殊意义的字符串
opener 打开当前床窗口的富窗口的window对象

<body>
<button id="btn">按钮</button>
    <script>
        window.onload=function(){
            var btn=document.getElementById('btn')
            btn.onclick=function(){
                // open("http://www.baidu.com");
                // 注: 如果只有一个参数,调用窗口会打开新窗口,加载url;(如果一直点则一直打开新窗口)
                open("http://www.baidu.com","百度")
                //注:第二个参数,是给打开的新窗口起一个名字,然后以后,再去加载url,就在这个已经七号名字的目标窗口加载url
            }
        }
    </script>
</body>

父窗口

<body>
<script>
    window.onload=function(){
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            open("sub.html","子窗口","width=400,height=400,top=200,left=200");

        }
    }
</script>
<input type="button" id="btn" value="打开子窗口">
</body>

子窗口

<body>
<script>
        window.onload=function(){
            var btn=document.getElementById('btn')
            btn.onclick=function(){
               opener.document.write("子窗口让我输入的")
               //opener**  **打开当前床窗口的富窗口的window对象**
            }
        }
</script>
<button id="btn">按钮</button>
</body>

location 我们浏览器上的地址栏输入框location 属性**

注:它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能
location 中的属性
url 统一资源定位符(快递包上一个地址)
protocol(协议):host(主机名):port(端口号)/路径(pathname)?查询字符串(search)#描点(hash)
http://www.baidu.com:8080/code/xxx.html?username=xxx&&age=18#1

location.hash 锚点 #1 实现页内跳转

   <script>
    window.onload=function(){
        document.onclick=function(){
            location.hash="#3";
        }
    }
    </script>

host:port 主机名:端口号浏览器的端口号默认 localhost:8080
IP 通过IP 我们可以在全球范围内,找到我这台电脑所使用的网络的地址.
端口号 正在是那个用网络的软件,在当前电脑内唯一的标识
IP:端口号

hostname 主机名域名/IP
注:域名其实就是给IP起一个好记的名字

href (整个url)

alert(location.href);// 当前页面的url

pathname 路径名

alert(location.pathname);//当前页面服务器上存放的路径

protocol 协议

alert(location.protocol)
/*
http:网络协议
file:本地文件协议
*/

search 查询字符串
跟在?后面的部分

//alert(location.search);//?articleId=104861206
window.onload=function(){
	document.onclick=function(){
		location.search="?username=xxx&&password=123";//当点击页面的时候,天下搜索词
		}
	}

location 方法(3个)

assign() 跳转到指定URL
reload() 重新加载当前的 URL( 如果传参 ,参数为true的时候,强制加载,从服务器源头加载,忽略缓存)
**replace() ** 用新的URL替换当前页面,可以避免产生跳转前的历史记录

<body>
<script>
    window.onload=function(){
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            // location.assign("http://www.baidu.com");//跳转到指定的URL
            // location.reload();//重新加载当前的URL,如果参数为true 则从服务器重新加载
            location.replace("http://www.baidu.com"); //用新的URL替换当前页面,可以避免产生条赚钱的 历史记录
        }
    }
</script>
<button id="btn">按钮</button>
</body>

history 对象

history是window对象的属性,它保存这个用户上网的记录

属性:
history.length 返回当前history对象中记录中历史记录的条数

方法:

history.back() 返回上一条历史记录,类似于后退
**hsitory.forword()**前进到吓一跳历史记录,类似前进
history.go(num) 中间参数填+num 就前进num ;填-num,就后退num

获取url中的search,通过传入对应的key,获取key对应的value

列如 url =http://localhost:63342/sub.html?id=5&searchValue=ok#1 key
传入url id 返回值为5


    function getValue(search,key){
       //查询?搜索词
       var start=search.indexOf("?");
       //查询#hash
       var end=search.lastIndexOf("#");
       var value=search.indexOf("&");
       var searchValue;
            if(end==-1&&value==-1){
                //没有hash切为最后一个query字符串
                searchValue=search.slice(start+1);
                var arr=searchValue.split("=");
                if(arr[0]!=key){
                    return alert("不存在指定的key")
                }
                return arr[1]
            }else{
                searchValue=search.slice(start+1,end);
                var arr=searchValue.split("&");
                var arr1=new Array();
                var arr2;
                //二维数组
                for(i in arr){
                    arr2=arr[i].split("=")
                    arr1.push(arr2)
                }
                for(i in arr1){
                    // console.log(arr1[i])
                        if(arr1[i][0]==key){
                            console.log(arr1[i][1])
                            return arr1[i][1];
                        }
                    }
                // console.log(22222,arr)
            }
    }
   getValue("http://localhost:63342/sub.html?id=5&searchValue=ok#1","id")