• Javascript高级程序设计第二版第八章BOM笔记


    8.1 window对象

    window有双重的角色,既可以通过JavaScript访问浏览器窗口的接口,又是ECMAScript规定的Global对象。

    8.1.1 全局作用域

    var age = 29;

    function sayAge(){

             alert(this.age);

    }

    alert(window.age); //29;

    sayAge(); //29;

    8.1.2 窗口关系及框架

    如果页面中有frames,则每个frames都拥有自己的window对象,并且保存在frames对象中。

    可以用window.frames[0]或者window.frames[framesName]来引用框架

    8.1.3 窗口的位置

    moveTo():接收新位置的x,y坐标值

    moveBy():接收在水平和垂直方向上移动的像素数

    8.1.4 窗口大小

    resizeTo():接收浏览器窗口的新宽度和新高度

    resizeBy():接收新窗口与原窗口的宽度和高度之差

    var pageWidth = window.innerWidth,

       pageHeight = window.innerHeight;

    if(typeof pageWidth != ‘number’){

             if(document.compatMode == ‘CSS1Compat’){

                       pageWidth = document.documentElement.clientWidth;

                       pageHeight = document.documentElement.clientHeight;

    } else {

             pageWidth = document.body.clientWidth;

             pageHeight = document.body.clientHeight;

    }

    }

    FireFox,Safari,OperaChrome4个属性:innerWidth,innerHeight,outerWidth,outerHeight。在SafariFireFox,outerWidthouterHeight返回浏览器窗口本身的尺寸。Opera中这两个属性表示页面视图容器的大小。而innerWidthinnerHeight表示该容器中页面视图区的大小。在Chrome中,outerWidth,outerHeightinnerWidth,innerHeight返回的相同的值,即视口的大小而非浏览器窗口的大小。

    ie6标准模式下:document.documentElement.clientWidth, document.documentElement.clientHeight这两个值有效,而在混杂模式下:则通过document.body.clientWidthdocument.body.clientHeight,而在chrome下这两种方式都可以取得相同的值。

    8.1.5 导航和打开窗口

    window.open();

    8.1.6 间歇调用和超时调用

    setTimeout(),setInterval();

    8.1.7 系统对话框

    alert(),confirm()prompt();

    8.2 location对象

    location是一个特别的对象,因为它既是window的属性,也是document的属性,换句话说,window.locationdocument.location引用的同一个对象。

    8.2.1 查询字符串参数

    location.search返回从问号到URL末尾的所有内容,但却没有办法逐个访问其中的每个查询字符串参数。

    8.2.2 位置操作

    一般使用location.href()

    但是通过location.href会是浏览器中生成一条新记录,因此用户单击“后退”按钮都会导航到前一个页面,要禁用这种行为,可以使用location.replace方法。

    location.reload();    //重新加载(有可能从缓存中加载)

    location.reload(true); //重新加载(从服务器重新加载);

    8.3 navigator对象

    navigator是最早有Netscape Navigator 2.0引入的,但现在已经成为识别客户端浏览器的事实标准。

    8.3.1 检测检查

    name: 插件的名字

    description:插件的描述

    filename:插件的文件名

    length:插件所处理的MIME类型数量

    //检测插件(ie中无效)

    function hasPlugin(name){

             name = name.toLowerCase();

             for(var i=0; i<navigatior.plugins.length; i+){

             if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){

                       return true;

             }

    }

    return false;

    }

    //检测FLASH

    alert(hasPlugin(‘FLASH’));

    function hasIEPlugin(name){

             try{

             new ActiveXObject(name);

    } catch(ex){

             return false;

    }

    }

    //检测FLASH

    alert(hasPlugin(‘ShockwaveFlash.ShockwaveFlash’));

    8.3.2 注册处理程序

    FireFox 2.0navigator新增registerContentHandler registerProtocolHandler 的方法。(这两个方法在html5中有定义)。这两个方法可以让一个站点指明它可以处理特定类型的信息。

    registerContentHandler接受三个参数:要处理的MIME类型、可以处理该MIME类型的页面的URL以及应用程序的名字。

    navigator.registerContentHandler(‘application/rss+xml’, ‘http://www.sohu.com?feed=%s’, ‘some Reader’);

    FireFox 2.0 虽然实现了registerProtocolHandler,但该方法还不能用。

    8.4 screen对象

    screen 用处不是很大,主要存储浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。

    8.5 history对象

    history.go(-1) | history.back(); //后退一页

    history.go(1) | history.forward();//前进一页

    history.go(n);//前进n

    history.go(‘sohu.com’);//跳转到最后的sohu页面

    history还有一个length属性,保存着历史记录的数量。如果history.lenght 等于 0,那么应该是用户打开窗口后的第一个页面

    一个简单的应用:

     但是如果用到页面上对当前页面添加样式就派上用场了。

     比如:

     

    演出与作品,是当前页面,需要添加样式,头部是程序里边共有的。

     这时候,

    function currentLink(){
        
    var nav = document.getElementById('topnav');
        
    var links = nav.getElementsByTagName('a');
        
    var currenturl = window.location.href;
        
    for(var i=0; i<links.length; i++){
            
    var linkurl = links[i].getAttribute('href');
            
    if(currenturl.indexOf(linkurl) != -1){
                links[i].parentNode.className 
    = 'current_menu';
            }
        }
    }

  • 相关阅读:
    学习方法
    仿知乎Android端回答UI
    【LeetCode】:二叉树的Max,Min深度
    LeetCode:二叉树的前、中、后序遍历
    Caffe学习系列(四)之--训练自己的模型
    后端开发--之文件上传
    Python——轻量级web服务器flask的学习
    Django 部署(Apache下)
    Caffe学习系列(三)Docker安装及一些问题的记录
    Caffe学习系列(二)Caffe代码结构梳理,及相关知识点归纳
  • 原文地址:https://www.cnblogs.com/milk/p/2445719.html
Copyright © 2020-2023  润新知