zoukankan      html  css  js  c++  java
  • BOM对像

    window对像

    window对象有双重角色,既是一个浏览器的对外接口,也是ECMAScript规定的全局对像。在全局作用域声明的方法,变量都是window对像的属性和方法。定义的全局变量和通过window.property定义属性是有区别的,定义的全局变量有个[[Configurable]]特性值为false,因而不能通过delete删除(wm平台IE不允许通过window.property = value 来申明全局变量)
    
     var test = 'global1';
     console.info(test);//global
     window.test = 'replace';
     console.info(test);//replace
     console.info(window.test)//replace
     var deletetest = '123';
     delete deletetest ;//false
     window.deletetest= '123';
      delete deletetest ;//true
    • 窗口的关系

      页面中包含框架,则每个框架都有自己的window对像,并且保存在frames集合中。每个window对像都有name属性包含框架的名称.全局变量top始终指向最外层的框架即为浏览器窗口,parent指向当前框架色直接上层框架。在没有框架的情况下parent和top指向同一个window.
      
    • 窗口位置大小

      • 窗口位置
      属性 解释 IE Safari Opera Chrome Firefox
      screenLeft 窗口相对于屏幕左边的位置 Y Y Y Y N
      screenTop 窗口相对于屏幕上边的位置 Y Y Y Y N
      screenX 窗口相对于屏幕左边的位置 N Y Y(于screenLeft不对应) Y Y
      screenY 窗口相对于屏幕上边的位置 N Y Y(于screenTop不对应) Y Y

      在IE,Opera中screenLeft,screenTop表示屏幕左边和右边到window对像表示页面可见区域的距离(包含浏览器工具栏),在FireFox,Chrome,Safari中screenY或screenTop保存的是浏览器窗口到屏幕的相对距离。
      框架中FireFox,Chrome,Safari始终返回页面每个框架的top.screenX和top.screenY每次结果一致。而IE,Opera会返回框架相对于屏幕边界的精确值。
      moveTo,moveBy接收两个参数精确移动到新的位置。

      • 窗口大小
      属性 IE Safari Opera Chrome Firefox
      innerWidth IE9+页面视图大小 页面视图大小 页面视图大小 页面视图大小
      innerHeight IE9+页面视图大小 页面视图大小 页面视图大小 页面视图大小
      outerWidth IE9+浏览器窗口本身的尺寸 浏览器窗口本身的尺寸 页面视图大小 页面视图大小(innerWidth相等) 浏览器窗口本身的尺寸
      outerHeight IE9+浏览器窗口本身的尺寸 浏览器窗口本身的尺寸 页面视图大小 页面视图大小(innerHeight相等) 浏览器窗口本身的尺寸
      //在IE,Chrom,Safari,Opera,Firefox中document.documentElement.clientXX保存页面的视口信息,在IE6这些属性在标准模式有效,在混杂模式通过 document.body.clientXX
      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;
      }
      }

      resizeTo(),resizeBy()调整窗口大小

    • 弹出框和打开窗口

      • 弹出窗口window.open()
      设置 说明
      fullscreen yes/no 仅限IE,窗口是否最大化
      height number 窗口高度>=100
      left number 左坐标,不能为负
      location yes/no 是否显示地址栏
      menubar yes/no 显示菜单栏。默认no
      resizable yes/no 拖动改变浏览器大小,默认no
      scrollbars yes/no 是否允许滚动,默认no
      status yes/no 显示状态栏,默认no
      toolbar yes/no 显示工具栏,默认no
      top number 窗口上坐标,不能负
      width number 窗口宽度>=100

      window.open() 返回新窗口window,新窗口window.opener指定原始窗口,弹出窗口被屏蔽window.open()可能会返回null

      • 对话框
        alert(),confirm(),prompt()调用系统对话框显示信息,
        confirm()调用警告框返回一个布尔值,点击ok返回true
        prompt()提示框 ,返回输入值
        window.print()显示打印对话框
        window.find()显示查找对话框

    location对象

    localtion对象提供当前窗口中加载的文档有关的信息,既是window对像属性,也是document对象的属性
    
    • location属性
    属性名 例子 说明
    hash ‘#contents’ 返货URL中的hash(#后面的字符串)
    host ‘127.0.0.0:80’ 服务器名称和端口号
    hostname ‘127.0.0.0’ 服务器名称
    href http://127.0.0.0 页面完整URL
    pathname ‘/index/’ URL的目录和文件名
    port 8000 端口号
    protocol ‘http’ 协议
    search ‘?wd=javascript’ 查询字符串

    location.assign(url)打开新的url并在浏览器历史中生成一条记录,location.href或者window.location设置一个url,也会调用assign(),location.replace(url)不会生成历史记录不能回到前一个页面。loacation.reload()重新加载当前页面。

    这里写图片描述
    这里写图片描述

    screen对象

    这里写图片描述
    这里写图片描述

  • 相关阅读:
    【转】Scala基础知识
    Python知识之 方法与函数、偏函数、轮询和长轮询、流量削峰、乐观锁与悲观锁
    jQuery Ajax async=>false异步改为同步时,导致浏览器假死的处理方法
    Django框架之DRF APIView Serializer
    Python之虚拟环境virtualenv、pipreqs生成项目依赖第三方包
    celery 分布式异步任务框架(celery简单使用、celery多任务结构、celery定时任务、celery计划任务、celery在Django项目中使用Python脚本调用Django环境)
    微信推送功能实现
    Haystack搜索框架
    支付宝支付
    Redis初识01 (简介、安装、使用)
  • 原文地址:https://www.cnblogs.com/jcheng996/p/5401479.html
Copyright © 2011-2022 走看看