登录
2023-05-12 开启多语言插件支持……
> 技术流 > 前端开发 > javascript > JS学习笔记4_BOM

JS学习笔记4_BOM

javascript 苏 demo 2467℃ 0评论

1.frame相关对象

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

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

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

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

2.窗口、页面相关

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

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）大小

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.打开新窗口的方式

//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毫秒后把指定的任务添加到任务队列中

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

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

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

4.间歇调用

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

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

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

(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（安全性限制）

10.客户端检测技术

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

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

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

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

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

打赏

转载请注明：苏demo的别样人生 » JS学习笔记4_BOM

   如果本篇文章对您有帮助，欢迎向博主进行赞助，赞助时请写上您的用户名。

   支付宝直接捐助帐号oracle_lee@qq.com 感谢支持！
喜欢 (0)or分享 (0)