zoukankan      html  css  js  c++  java
  • JAVASCRIPT高程笔记-------第八章 浏览器BOM对象

    8.1 window对象--表示一个浏览器的实例

    在全局作用域中声明的任何变量、函数都会变成window对象的属性和方法,与之直接定义window对象的属性的区别是   window.xxx 可以通过delete操作符删除   而全局中定义的无法通过delete操作符 删除!

    浏览器窗口位置以及关系 --如果页面包含框架那么每个框架都拥有自己的window对象,并且保存在frames集合中,在frames集合中可以通过索引(从0开始,由左至右,由上到下)或者框架的名称来访问相应的window对象,每个window对象都有name属性包含框架的名称

    top对象-------始终指向最高(最外)层的框架,在包含框架的页面中 top逼window对象更适合引用

    parent对象 ---始终指向当前框架的直接上层框架,如果不包含框架 parent对象一定等于top对象 (此时它们都等于window对象)!

    window.open()方法 既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,方法接收四个参数,要加载的URL,窗口目标,一个特性字符串,表示新页面是否取代浏览器历史记录中当前的加载页面的布尔值!

      如果传递了第二个参数,而且该参数是已有窗口或者框架的名称,那么就会在指定的窗口或框架内加载指定的URL   等同于   <a href="xxxx" target="xxxx">

           如果第二个参数并不是一个已经存在的窗口或者框架,那么该方法根据第三个参数字符串创建一个新的窗口或者标签页,第三个参数为空则创建全部为默认设置的浏览器窗口 

        此方法会返回一个指向新窗口的引用,同时 调用新窗口的window.openr属性可以获取父窗口的引用,在IE8与谷歌浏览器中  会以独立进程中运行每个标签页,如果需要与新打开的窗口或者标签页面通讯,那么新标签页就不能独立运行在进程中

           在谷歌中 将新创建的openr属性设置为null 则表示 不保持通讯,实例

    var baidu = window.open("wwww.baidu.com");
    baidu.opener = null;

    安全限制-检测浏览器是否被禁用或者屏蔽弹出窗口 ---以下代码可以检测出是否被屏蔽,但并不阻止浏览器告知用户被屏蔽的弹出窗口有关消息

    var blocked = false;
    try{
        var wroxWin = window.open("http://wwww.baidu.com","_blank")
        if(wroxWin == null){
            console.log(blocked);
            blocked = true;
        }
    }catch(ex){
        console.log(blocked);
        blocked = true;
    }
    
    if(blocked){
        console.log("aaaaaa");
    }

    8.1.6  间歇调用和超时调用

    js是单线程语言,但它允许通过设置超时值和间歇值来调度代码在特定的时刻执行

     window.setTimeout("",1000)  指定在1秒后执行第一个参数的js代码, 与eval() 函数中使用字符串一样,注意 第二个参数虽然为指定的时刻,但并不保证在指定时间后执行,因为js是单线程执行,一定时间内只能执行一段代码,因此js会将此代码放入任务队列中,如果任务队列为空则就立即执行,若任务队列存在其他未执行完成的代码,那么就会在其他代码执行后再执行window.setTimeout()中的代码 ,此方法会返回一个数值ID作为方法的引用 ,可以在clearTimeout(xxx) 传入此数值ID 进行取消  

     setInterval("xxx",1000)  此方法指间隔1秒后重新调用执行第一个参数的js代码,与超时调用一致 ,也会返回数值ID作为对它的引用 ,通过clearInteval()方法进行取消间歇调用

    8.1.7  系统对话框    alert(),confirm(),promt() 可以调用系统对话框向用户传递消息 ,它们的显示效果依赖于系统或者浏览器本身的设置

       alert();用于向用户提示消息,

      comfirm()  用于提示消息后还接收用户操作的返回值,可以根据用户操作的不同而执行不同的代码,

      promt(),提示一段传入的字符串,并且在提示框上有一个文本输入框,用户接收用户输入的内容

    8.2  location对象 ----既是window对象的属性,又是document对象的属性

    位置操作    location.assign(URL) ,此时会在当前的浏览器页面内打开新的url并且生成历史记录

        window.location = “xxxxx”   ;  location.href = “xxxxx”     此处代码执行后也是通过location.assign() 方法进行打开新的Url

        另外修改location对象的 port,host. 等属性也会改变当前浏览器加载的页面内容  (hash属性除外)   并且生成历史记录

         location.replace() 也会加载新URL的内容,但是不会生成历史记录,因此不能使用浏览器的前进后退 

        location.reload()  方法页面重新加载,此方法接收一个布尔参数,表示是否从缓存中加载,如果true 则重新请求服务器进行加载, 不传递参数则浏览器以最有效的方式加载(可能冲缓存中加载)

    8.3 navigator 对象  ----识别客户端浏览器的标准对象

    8.3.1检测插件   -- 检测浏览器中是否安装了指定的插件(非IE)可以通过plugins数组,该数组的每一项都包含以下属性,name: 插件名字 ,description:插件描述,filename:插件的文件名,length :插件所处理的MIME类型数量

      

    //检测是否包含某个插件 IE无效
    function hasPlugin(name){
        name = name.toLowerCase();
        for(var i=0; i<navigator.plugins.length; i++){
            if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                return true;
            }
        }
        return false;
    }
    
    console.log(hasPlugin("flash"));
    
    //遍历当前浏览器所有的插件
    (function hasPlugin2(){
        for(var i=0; i<navigator.plugins.length; i++){
            console.log(navigator.plugins[i].filename);
        }
    })();

     IE中的插件检测,由于IE是采用com组件的方式实现插件,因此需要指定插件的唯一标识符, 例如 flash的标识符为“ShockwaveFlash.ShockwaveFlash”   

    function hasIEplugin(name){
        try{
            new ActiveXObject(name);
            return true;
        } catch (ex){
            return false;
        }
    }
    console.log(hasIEplugin("ShockwaveFlash.ShockwaveFlash"));

    history对象  --保存着用户浏览器的历史记录,从窗口被打开的那一刻算起,每个浏览器窗口,标签页,每个框架都有自己的history 

      go() 方法  接收一个数字参数,负数表示向后  正数表示向前  类似于浏览器的前进后退; 也可以接收一个字符串参数,那么浏览器会跳转至历史记录中包含此字符串第一个位置,可能前进也可能后退,如果没找到包含此字符串的历史记录则什么都不会做

     history.black()后退   history.forward()前进

     

  • 相关阅读:
    深入理解Mysql——锁、事务与并发控制
    深入理解Mysql——锁、事务与并发控制
    vs code中Vue代码格式化的问题
    Vue中的父子传值问题
    用画布canvas画安卓logo
    用画布canvas画安卓logo
    用画布canvas画安卓logo
    用画布canvas画安卓logo
    软中断
    软中断
  • 原文地址:https://www.cnblogs.com/shenwenbo/p/7986302.html
Copyright © 2011-2022 走看看