JS学习笔记4_BOM

摘抄自：https://www.cnblogs.com/ayqy/p/4410334.html

 

 

1.frame相关对象

 

  • top：指向最外层框架，使用top可以在一个框架中访问另一个框架，例如top.frames[index/name]

  • parent：指向当前框架的直接上层框架

  • window：代码所在框架的特定实例，所以window对象不唯一，各个框架都有各自的window对象

  • self：指向window，二者可以互换

 

2.窗口、页面相关

 

1.获取窗口相对屏幕左边界和上边界的位置

 

1
2
3
var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF只支持后者
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///

 

浏览器对窗口位置的理解不同，浏览器窗口最大化时上面的代码输出结果是：

 

  • Chrome：(0, 0)

  • IE8：(0, 0)

  • FF：(-4, -4)

 

Safari和Opera未知，浏览器厂商的分歧在于窗口位置是浏览器窗口的位置还是页面容器（viewport）的位置

 

2.获取页面视口（viewport）大小

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pageWidth = window.innerWidth;
var 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;
  }
}
alert(pageWidth + ', ' + pageHeight);///

 

视口（viewport）指的是页面可见区域，也就是浏览器给页面提供的容器，浏览器窗口最大化时上面的代码输出结果是：（分辨率1366*768）

 

  • Chrome：(1366, 653)

  • IE8：(1362, 644)

  • FF：(1366, 667)

 

PC端浏览器在这一点上达成了共识，但移动浏览器存在差异，如果需要支持移动端浏览器，还需要仔细研究各个浏览器的支持情况，这里不再展开

 

3.打开新窗口的方式

 

1
2
3
4
5
//window.open(url, target, strOptions, replaceOrNot);//等价于<a href="http://ayqy.net/" target="_self"></a>，target值还可以是frameName，表示在指定的frame中打开页面
//window.open('http://ayqy.net/', '_self');//在当前页面打开，返回按钮失效
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//弹出200\*200的窗口
//setTimeout(win.close(), 3000);//3s后自动关闭
//window.open('http://ayqy.net/', '_self', '', true);//替换掉当前历史记录，无痕跳转

 

P.S.用窗口方式展示内容不利于SEO，最常见的弹出窗口除了广告就是第三方帐号登录，这些不需要SEO的地方

 

3.超时调用

 

setTimeout(strCode/funcName, timeout);表示经过timeout毫秒后code不一定会执行，因为该函数的确切含义是：timeout毫秒后把指定的任务添加到任务队列中

 

取消尚未执行的延时任务：

 

1
2
var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);

 

P.S.setTimeout的第一个参数虽然可以是字符串，但建议用函数名，因为字符串需要先解析成js代码才能执行，存在性能损失

 

4.间歇调用

 

setInterval(strCode/fun, timeout);表示按照指定时间间隔把任务插入任务队列

 

注意：如果准备插入新任务时上次插入的任务还没有执行完，会自动取消本次插入。也就是说，如果任务队列里没有相同任务，则插入，否则等下一次

 

取消尚未执行的间歇任务：与超时调用相同，clearInterval(intervalId);

 

注意：不建议使用间歇调用，因为后一个间歇调用可能会在前一个结束前启动。一般用递归超时调用来模拟，例如：

 

1
2
3
4
(function(){
  alert('x');
  setTimeout(arguments.callee, 3000);//注意不要用函数名，用arguments.callee更安全，因为不怕函数名被从外部更改
})();//匿名函数立即执行

 

5.对话框

 

  • alert(msg)：警告框，用来显示错误信息，只有一个确定按钮

  • confirm(msg)：确认框，用于确认某些重要操作，例如删除，有确认/取消按钮，返回true/false

  • prompt(msg, hint)：输入框，用于获取用户输入，有确认/取消按钮，返回输入值/null

  • windowprint()、window.find()：打印/查找，用处很少

 

6.location对象

 

1.获取url

 

  • location.href：获取当前页面的完整url，例如”http://www.ayqy.net”

  • location.search：获取查询字符串，例如”?keyword=do”

  • location.hash：获取锚（#以及后面的值，叫hash是因为在UNIX中，#就叫hash），例如”#menu”

  • location.host：获取主机名和端口号，例如”www.ayqy.net:80″

  • location.hostname：获取主机名，例如”www.ayqy.net”

  • location.pathname：获取url中的目录或文件名，例如”/film/”

  • location.port：获取端口号，例如”80″

  • location.protocol：返回页面使用的协议，例如”https:”

 

2.跳转，重定向

 

  • location.assign(url);

  • location.href = url;//最常用

  • window.location = url;

  • location.replace(url);//跳转且无法返回

  • location.reload(true/false);//重新载入当前页面，若true则不从缓存中取

 

7.navigator对象（用来检测浏览器相关参数）

 

提供插件检测和注册处理程序等功能，注册处理程序相当于通知浏览器当前页面提供某种在线功能（例如在线电子邮件，RSS阅读器等等），注册后用户执行某些操作（例如访问RSS源页面）后会自动请求已注册页面，相当于桌面应用的设置默认打开方式

 

8.screen对象

 

用于获取客户端相关信息，例如屏幕宽高、可用宽高等等，用处不多，浏览器支持性也不好

 

9.history对象

 

  • history.go(delta);或者history.go(str);向前/后跳转，或者跳转到最近的url包含str的页面（可能向前也可能向后）

  • history.back();history.forward();模拟浏览器的后退/前进按钮

  • history.length;获取历史记录条数，为0则说明当前页是用户打开浏览器后访问的第一页

 

注意：可以在历史记录中跳转，但无法获得历史URL（安全性限制）

 

P.S.HTML5提供了hsitory.pushState/history.replaceState函数，有人把pushState + Ajax合起来叫PJax技术，用来实现页内刷新的无跳转web App，但pushState存在兼容性问题，需要引入其它支持组件

 

10.客户端检测技术

 

  1. 功能检测（特性检测）：在编写代码之前先检测用户浏览器的能力，以便用不同的方式来实现目的，例如：

    if(typeof String.startsWith === 'function'){...}

  2. 怪癖检测：某些浏览器执行特定代码时会出现不合理的结果，当某个怪癖会干扰脚本运行时才使用（此处的怪癖其实是针对浏览器实现的js的bug而言的，比如不该枚举的属性可枚举等等，怪癖比较少见）

  3. 用户代理检测：通过检测UA字符串来识别用户浏览器的具体信息，但UA具有欺骗性

 

P.S.需要使用客户端检测技术时，优先选择级别如上所述，先做功能检测，不行就怪癖检测，UA检测是下下策，因为UA检测是针对特定型号的浏览器的，浏览器补丁可能会让现有方案失效

 

posted @ 2021-04-12 11:39  smil、梵音  阅读(52)  评论(0)  编辑  收藏  举报