zoukankan      html  css  js  c++  java
  • 浏览器对象模型

      在web中使用JavaScript,BOM是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。

    1 window对象

       BOM的核心对象是window,表示浏览器的一个实例。在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

    2 全局作用域

        window对象同时扮演着ECMAScript中Global对象的角色,因此所有全局作用域中声明的变量。函数都会变成window对象的属性和方法。全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。

    3 窗口大小

         var pageWidth = window.innerWidth;

         var pageHeight = window.innerHeight;

         if(typeof pageWidth != "number"){
    
           if(document.compatMode == "CSS1Compat"){
    
                 pageWidth = document.documentElement.clientWidth;//IE,Firefox,Safari,Opera.Chrome保存信息
    
                 pageHeight = document.documentElement.clientHeight;
    
           }else{
    
                 pageWidth = document.body.clientWidth;//IE6中标准模式,以上属性可获得
    
                 pageHeight = document.body.clientHeight;//混杂模式使用body
    
           }
    
         }

       4 导航和打开窗口

        window.open()可以导航到一个特定的URL,可以打开一个新的浏览器窗口,

        4个参数:加载的URL,窗口目标,特性字符串,新页面是否取代浏览器。历史记录中当前加载页面的布尔值。(第4个参数只在不打开新窗口的情况下使用)

        < a href=“http://www.baidu.com” target=“topFrame”></ a>//同等于

        window.open(“http://www.baidu.com”,“topFarme”);

        如果一个名叫"topFrame"的窗口或框架,就在该窗口或框架加载这个URL,否则会创建一个新窗口将其命名为"topFrame",

        第二个参数:_self,_top,_blank,_parent。

        5  间歇调用和超时调用

    超时调用 setTimeout()

    超时调用:指定的时间过后执行代码 setTimeout()方法

    超时调用使用window对象的setTimeout()方法。两个参数:要执行的代码和以毫秒表示的时间

    setTimeout(function(){
    
             alert("Hello world!");
    
    },1000);//推荐使用
    
    setTimeout("alert('Hello world')",1000);//可能导致性能损失,不建议以字符串作为第一个参数

    后指定的代码不一定执行JavaScript是一个单线程序的解释器,因此一定时间内只能执行一段代码。为了控制要执行的代码,就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。第二个参数告诉JavaScript再过多久把当前任务添加到队列中。调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout()方法,并将相应的超时调用ID作为参数传递给它。

    var timeId = setTimeout(function(){
    
             alert("Hi");
    
    },1000);
    
    clearTimeout(timeId);

    超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined。

    间歇调用 setInterval()

    按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载。setInterval() 参数与setTimeout()相同setInterval()方法同样也会返回一个间歇调用ID,该ID可用于在将来某个时刻取消间歇调用。clearInterval()取消间歇调用。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

    6  系统对话框

        alert()方法,向用户显示一个系统对话框,其中包含指定的文本和一个OK(“确定”)按钮。

        confirm()方法,"警告"对话框,OK按钮,cancel按钮

        prompt()方法,"提示"框,提示用户输入一些文本。

      7  location对象

        location提供了当前窗口中加载的文档有关的信息,还提供了一些导航功能。

        既是window对象的属性,也是document对象的属性,

        location对象的用处不只表现在它保存着当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。

     8   查询字符串参数

        创建一个函数,可以解析查询字符串,然后返回包含所有参数的一个对象。

    function getQuertStringArgs() {
    
                  // 取得查询字符串并去掉开头的问号
    
                  var qs = (location.search.length > 0 ? location.search.substring(1): ''),
    
                  // 保存数据的对象
    
                  args = {},
    
                  // 取得每一项
    
                  items = qs.length ? qs.split("&") : [],
    
                  item = null,
    
                  name = null,
    
                  value = null,
    
                  // 在for循环中适应
    
                  i = 0,
    
                  len = items.length;
    
                  // 逐个将每一项添加到args对象中
    
                  for(i=0; i < len; i++) {
    
                    item = items[i].split("=");
    
                    name = decodeURIComponent(item[0]);
    
                    value = decodeURIComponent(item[1]);
    
                    if(name.length) {
    
                      args[name] = value;
    
                    }
    
                  }
    
                  return args;
    
          }

      9  位置操作

        改变浏览器的位置,使用assign()方法并为其传递一个URL。

        location.assign(“http://wwww.baidu.com”);

        立即打开新URL,在浏览器的历史记录中生成一条记录

        window.location = “http://wwww.baidu.com”;//也会调用assign()方法,效果一样

        location.href = “http://wwww.baidu.com”;//也会调用assign()方法,效果一样,常用

        location.replace(“http://wwww.baidu.com”);

        这个方法虽然会导致浏览器位置改变,但不会在历史记录中生成新纪录,用户不能单击“后退”回到前一个页面

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

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

  • 相关阅读:
    sql对日期操作
    computeroperationcommand
    Convert函数对日期的应用
    编写快速、高效的JavaScript代码
    vim常用操作技巧与配置
    PureFTPd安装配置
    关于PHP代码加密和文本加密
    父页面调用iframe里的js函数相关例程,Iframe之间通讯研究
    常用JavaScript语法100讲
    计算机端口
  • 原文地址:https://www.cnblogs.com/hjy-21/p/12343686.html
Copyright © 2011-2022 走看看