第八章：BOM

Posted 2020-10-10 阿奇

/*
     * bom:
     *   提供了浏览器接口;
     *   w3c为了把javascript最基本的只是标准化已经将bom的主要方面纳入html5规范*/
    console.log(window);
    !(function (window) {
        /*自执行函数初始化变量不会给window添加属性
         *   因为这是局部变量是私有的
         *   虽然这里面的this指向window*/
        var age = 19;

        function fn() {
            console.log(this.age);

        }

        console.log(age, this.age, window.age);//19,undefined;undefined
        fn()


    })(window)


    console.log(top, parent);//这两个对象再ongoing框架时有特殊的含义没有框架时就是window


    !(function () {
        /*窗口位置*///获取的数值为number
//        相对于屏幕左上位置
        /*screenLeft     screenX
         * screenTop      screenY

         * */

        window.onclick = function (event) {
            console.log(event.screenX)
            /*下面是兼容写法*/
            var leftPos = typeof event.screenX === ‘number‘ ? event.screenX : event.screenLeft;
            var topPos = typeof event.screenY === ‘number‘ ? event.screenY : event.screentop;

        }
        console.log(window.screenLeft || window.scrollX);
        /*浏览器相对于庄口左上的距离。*/

        /*moveTo()将浏览器窗口移动到么某个位置哦===(这两个方法被很多浏览器禁用了那你还讲个毛)*/
        window.moveTo(0, 0);
        window.moveBy(0, 0);
    })()
    !(function () {
        /*窗口大小(视口大小)*/
//        兼容性好多
        /*
         * innerHeight outerHeight ie9+
         *
         * document
         *
         *
         *
         *
         * */
        console.log(document.documentElement.clientHeight || document.body.clientHeight); //
//        console.log(document.body.clientHeight);//谷歌中不可以用（但是其混杂模式可以用）火狐也不可用（混杂模式可以）
        /*resizeTo() resizeBy() 调整屏幕宽高 但已经禁用了*/
    })()
    !(function () {
        /*导航与打开窗口*/
//        window.open(‘url‘, ‘框架名（此参数不是必须）‘);

        window.onclick = function () {
            var win = window.open(‘http://www.baidu.com‘, ‘sss‘, ‘height=400,width=400,left=500,top=400‘);
            win.resizeTo(1000, 100);//改变窗口大小
            win.moveTo(1000, 100);//改变窗口位置
            setTimeout(function () {
                win.close();//关闭弹出的框架 主页面框架是不可用代码关闭的
            }, 3000)
//            window.close()
        }

    })()


    !(function () {
//        间歇调用与超时调用
// setInterval()
//  setTimeout()
//        clearInterval()
//        clearTimeout()
    })()

   !(function () {
        /*系统对话框
         *       这些对话框是同步与模态的 弹出时代码会停止执行 关闭时代码恢复执行
         * alert()
         * confirm() 返回值为布尔值
         * prompt()
         * */
        /*var result = confirm(‘chichihci‘);
        console.log(result);*/
        var aa=prompt(‘3123‘); //点击取消返回值为null 点击确定返回值为输入值
        console.log(aa);



        /*谷歌浏览器特有*/
//        window.print(‘print‘);
        window.find(‘find‘)
    })()

 /*location 是BOM最有用的对象之一
     *   它提供了与当前文档相关得到信息
     *   还提供了一些导航功能
     *   （ 它既是window的属性又是document的属性）
     *

     *
     *
     * */
    console.log(window.location);
    console.log(document.location);
    console.log("hash值" + location.hash);//会生成历史记录
    console.log("服务器名称与端口号" + location.host);
    console.log("不带端口号的服务器名称" + location.hostname);
    console.log("完整url" + location.href);//location.toString() 也返回这个值
    console.log("url目录与文件名" + location.pathname);
    console.log("端口" + location.port);
    console.log("页面使用的协议" + location.protocol);
    console.log("url查询的字符串" + location.search);

    /*将location.search转化为对象*/
    function getdata() {
        var qs = location.search.length > 0 ? location.search.substring(1) : ‘‘;
        args = {};
        var items = qs.length ? qs.split(‘&‘) : [];
        items.map(function (k, v, ele) {
            console.log(k);
            var a = k.split(‘=‘);
//            console.log(a);
            args[a[0]] = a[1]
        });
        console.log(args)

    }
    getdata()


    /*位置操作*/
//    location.assign(‘http://www.baidu.com‘);
    /*location.href=‘url‘ 与 window.location=‘   url‘ 也会以URL调用location.href的属性
    *
    * */
//    location.replace(‘http://www.baidu.com‘);//这种跳转是没有返回的
    setTimeout(function () {
        location.reload();//页面刷新 （有可能从缓存中获取）
//        location.reload(true); 页面刷新 从服务器获取
    },3000)

  /*navigation
    *    识别客户端浏览器的事实标准
    *
    *
    * */
    console.log(navigator)
    console.log(navigator.userAgent);//可以用来检测设备类型
    console.log(navigator.plugins);//可以用来检测有哪些插件

 /*
    *screen 基本上是来表明客户端的能力包括（不同浏览器支持的属性不一致）
    *   显示器信息
     *  像素宽高
     *
    * */
    console.log(screen)

   /*history
     用来保存用户的上网历史记录
     history.go()
     *
     * */
console.log(history.length);//存在历史记录的数量
    document.querySelector(‘.go1‘).onclick = function () {
//        history.go(1);//前进
        history.forward();//前进

        document.querySelector(‘.go2‘).onclick = function () {
//        history.go(-1)//后退
            history.back();//后退
        }
    }