码迷,mamicode.com
首页 > 其他好文 > 详细

BOM操作

时间:2020-12-15 12:14:32      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:undefined   split   name   elf   spl   use   sub   固定   amp   

1.窗口操作

1.在当前窗口打开,可后退
    HTML: <a href="url" target="_self">
    JS: open("url","_self")
2.在当前窗口打开,禁止后退
    JS: location.replace("新url")  //用新url代替history中当前地址
3.在新窗口打开,可打开多个
    HTML: <a href="url" target="_blank">
    JS: open("url","_blank")
4.在新窗口打开,只能打开一个
    HTML: <a href="url" target="自定义的窗口名">
    JS: open("url","自定义的窗口名")
原理: target属性其实是为新窗口指定内存中唯一的窗口名,浏览器规定,同一时刻,同名窗口只能打开一个,后打开的会覆盖先打开的
    _self :自动使用当前窗口的name
    _blank :不指定窗口名, 每打开一个窗口,浏览器会自动随机生成内部窗口名
    关闭窗口: /*window.*/close();

 练习:对上述打开窗口的四种方式分别练习

  <script>
        function open1(){
            open("http://www.baidu.com","_self");
        }
        function open2(){
            location.replace("http://www.baidu.com");
        }
        function open3(){
            open("http://www.baidu.com","_blank");
        }
        function open4(){
            open("http://www.baidu.com","baidu");
        }
    </script>
    <a href="http://www.baidu.com" target="_self">在当前窗口打开,可后退</a>
    <a href="javascript:open1()">在当前窗口打开,可后退(JS)</a>
    <br>
    <a href="javascript:open2()">在当前窗口打开,不可后退(JS)</a>
    <br>
    <a href="http://www.baidu.com" target="_blank">在新窗口打开,可打开多个</a>
    <a href="javascript:open3()">在新窗口打开,可打开多个(JS)</a>
    <br>
    <a href="http://www.baidu.com" target="baidu">在新窗口打开,只能打开一个</a>
    <a href="javascript:open4()">在新窗口打开,只能打开一个(JS)</a>

2.history

定义:保存当前窗口打开后,成功访问过的url的历史纪录栈
操作:
    前进:history.go(1)
    后退:history.go(-1)    history.go(-2)
    刷新:history.go(0)

3.location

定义:保存当前窗口正在打开的url地址的对象
属性:
    .href :获取或设置完整的url地址
    .protocol :协议
    .host :主机名+端口号
    .hostname :主机名
    .port :端口号
    .pathname :相对路径
    .search :查询字符串参数
    .hash :锚点地址
方法:
1.在当前窗口打开,可后退
    location="url"
2.在当前窗口打开,禁止后退
    location.replace("新url")
3.刷新
    普通刷新:优先从缓存中获取资源,缓存没有或过期,才去服务器找
        F5
        history.go(0)
        location.reload()
    强制刷新:无论有没有缓存,都强制从服务器获取新资源
        location.reload(true)

 练习:将search转化为对象形式

//?username=zhangdong&pwd=123456&favs=running&favs=swimming&favs=basketball
        function search2Obj() {
            var obj = {};
            if (location.search) {
                var arr = location.search.slice(1).split("&");
                //arr:[username=zhangdong,pwd=123456,...]
                for (var str of arr) {//遍历arr中每个子字符串
                    var subs = str.split("=");
                    var key = subs[0];
                    var value = subs[1];
                    //subs[username, zhangdong]
                    if (obj[key] === undefined)
                        obj[key] = value;
                    //.key=>["key"] key被写死为固定的字符串
                    //[key] key是动态变化的变量
                    else {
                        obj[key] = [].concat(obj[key], value);
                        //将属性的旧值和新值,拼到一个共同的数组中,然后将数组保存到新的属性中
                    }
                }
            }
            return obj;
        }
        var obj = search2Obj();
        console.log(obj);

 

BOM操作

标签:undefined   split   name   elf   spl   use   sub   固定   amp   

原文地址:https://www.cnblogs.com/hourglas/p/14110113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!