博客列表 >第二章 BOM操作

第二章 BOM操作

刘静的博客
刘静的博客原创
2020年08月21日 13:14:48686浏览

第二章BOM

BOM对象介绍

BOM:浏览器对象模型:

window(全局作用域)对象 location对象 screen 屏幕对象 history历史模式对象
alert(); href go()
confirm(); Hash
prompt(); URL
setInterval(); reload()
setTimeout();

window对象的alert|confirm|prompt方法

  1. window.alert('myname');
  2. var a = confirm('你确定离开网站吗?');
  3. console.log(a);
  4. var str = prompt('请输入你的内容?','liujing');//liujing是默认值
  5. console.log(str);

window对象的定时器方法

  1. setInterval();延迟性的操作

  2. setTimeout();周期性循环操作

  3. clearInterval();清除定时器

    1. // setInterval();
    2. // setTimeout();
    3. //延迟性的操作 等待操作
    4. window.setTimeout(function(){
    5. console.log('liujing');
    6. },2000)//即使延迟时间为0;但是也是队列
    7. //周期性循环的语句
    8. var num = 0;
    9. var timer = null;
    10. window.setInterval(function(){
    11. num++;
    12. if(num > 5){
    13. clearInterval(timer);
    14. return;//直接跳出循环
    15. }
    16. console.log('num:'+ num);
    17. },1000)
    18. // clearInterval()清除定时器

location对象的常用属性介绍

  1. // http://localhost:63342/WWW/BOM/index.html?user=111&pwd=1222
  2. console.log(location.host);//localhost:63342
  3. console.log(location.hostname);//localhost
  4. console.log(location.href);//http://localhost:63342/WWW/BOM/index.html?_ijt=3l2tefda44uql91v587ner77ji
  5. console.log(location.pathname);///WWW/BOM/index.html
  6. console.log(location.port);//63342
  7. console.log(location.protocol);//http: https:加密的
  8. console.log(location.search);//?user=111&pwd=1222
  9. // 位置操作
  10. //2秒之后跳转猿圈 https://www.apeland.cn/web
  11. setTimeout(function(){
  12. // location.href='https://www.apeland.cn/web'; //有历史记录
  13. // location.replace('https://www.apeland.cn/web');//没有历史记录
  14. location.reload();
  15. },2000)

[^注意:一定需要通过站点去访问页面]:

navigator对象:

如何检测当前浏览器上的插件(navigator对象):

  1. console.log(navigator);
  2. console.log(navigator.plugins);
  3. function hasPlugins(name){
  4. //如果有插件 返回true 反之亦然
  5. name = name.toLowerCase();
  6. for(var i=0;i<navigator.plugins.length;i++){
  7. if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
  8. //有此插件
  9. return true;
  10. }else{
  11. return false;
  12. }
  13. }
  14. }
  15. // alert(hasPlugins('Flash'));
  16. alert(hasPlugins('Chrome PDF Plugin'));

history对象:

  1. // 历史记录
  2. // console.log(history);
  3. var count = 0;
  4. var a = setTimeout(function(){
  5. count++;
  6. console.log(count);
  7. history.go(0);//原网页刷新 1:代表前进按钮按一次;-1:代表后退按钮后退1次
  8. },2000)
  9. console.log(a);

[^注意:go(2)代表网页前进2次;go(-2)代表网页后退2次]:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议