10.15 BOM浏览器对象模型

最新推荐文章于 2024-03-15 16:26:51 发布

吃土豆炖豆角文艺吗

最新推荐文章于 2024-03-15 16:26:51 发布

阅读量98

点赞数

分类专栏： BOM

本文链接：https://blog.csdn.net/qq_40710524/article/details/102561360

版权

BOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

挂载在window全局对象的可操作的方法 open close

   var newPage = window.open('http://baidu.com','跳百度','width=500,height=500');
        newPage.moveTo(300,300);
        setTimeout(()=>{window.close()},3000)

window有个location属性 location对象下有很多关于url的属性

假如当前地址是http://localhost:8080/list?a=2#test

则location下的属性值分别是

protocol ‘http:’ 协议的意思

hostname “localhost” 域名的意思

port “8080” 端口

host hostname+port

pathname “/lsit” 目录

search '?a=2' 参数

锚点 “#test” hash

origin "http://localhost:8080" 源

location的方法

location.assign('地址') 打开新的页面（在原页面基础上）但是可以返回

location.replace('地址') 在原页面基础上替换成新的页面不能返回

location.reload() 重新加载页面（文档）

一般可以通过改变href 和 hash属性值来做操作通过获取属性值来做判断

location.href('http://baidu.com')//相当于location.assign

https和http

多的s指的是ssl加密协议（加密身份认证）

http端口默认80 https端口默认443 ftp协议端口默认21 http连接是无状态的

screen对象 availheight是不包含任务栏高度

history对象只要是history.length长度是指页面的个数 history.back() 回退 history.go()前进

获取URL参数

<script>
        function getParams(params){
            var url =location.href;
            // var url = 'http://www.baidu.com/list?a=2&b=3#test';
            //?a=2&b=3#test
            var reg = /([^?=&#]+)=([^?=&#]+)/g;
            var obj = {};
            // console.log(reg.test(url));
            url.replace(reg,function(){
                // console.log(arguments)
                obj[arguments[1]]=arguments[2];

            })
            return obj[params]

        }
        console.log(getParams('a'));

    </script>

stringObject.replace(regexp/substr,replacement)

注意：ECMAScript v3 规定，replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

监听hash变换（路由）’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #item1,#item2,#item3{
            width: 100%;
            height: 0;
            opacity: 0;
           
        }
        #item1{
            background: aqua;
        }
        #item2{
            background: blue;
        }
        #item3{
            background: blueviolet;
        }
        #item1.active,#item3.active, #item2.active
        {
            transform: rotate(720deg);
            height: 100%;
            opacity: 1;
            transition: all 1s;


        } 
    </style>
</head>
<body>
    <p>
        <a href="#a">跳转A</a>
        <a href="#b">跳转B</a>
        <a href="#c">跳转C</a>
    </p>
    <div id="item1" class="active"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <script>
       hideClass();
       hashCallBack();
        window.onhashchange= hashCallBack; 
        function hideClass(){
            var oDiv= document.getElementsByTagName('DIV');
            for(var i=0;i<oDiv.length;i++)
            {
                oDiv[i].className='';
            }
        }
        function hashCallBack(){
            hideClass();

            if(location.hash=='#a')
            {
                document.getElementById('item1').className='active';
            }
            else if(location.hash=='#b')
            {
                document.getElementById('item2').className='active';
            }
            else
            {
                document.getElementById('item3').className='active';
            }
        }
        
    </script>
</body>
</html>

吃土豆炖豆角文艺吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.15 BOM浏览器对象模型

挂载在window全局对象的可操作的方法 open close var newPage = window.open('http://baidu.com','跳百度','width=500,height=500'); newPage.moveTo(300,300); setTimeout(()=>{window.close()},3000)win...
复制链接

扫一扫

专栏目录