JavaScript之BOM的五类对象简介

最新推荐文章于 2022-11-23 15:39:50 发布

Albert-Wilson

最新推荐文章于 2022-11-23 15:39:50 发布

阅读量333

点赞数

分类专栏： JavaScript 文章标签： JavaScript BOM

本文链接：https://blog.csdn.net/hxwm_8937/article/details/77248436

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
 （1） location对象：地址栏对象 

  <script> 
   

 
 console.log( 
 location.href 
 ); /* 
 完整的（路径即url 
 ） 
 */ 

 
 console.log(location. 
 protocol 
 ); /* 
 协议 
 */ 

 
 console.log(location. 
 port 
 ); /* 
 端口号 
 */ 

 
 console.log(location 
 .hostname 
 ); /* 
 主机名称 
 */ 

 
 console.log(location. 
 pathname 
 ); /* 
 路径名称 
 */ 

 
 console.log(location. 
 search 
 ); /* 
 ？后面的数据部分 
 */ 

  </script> 

 
 <body> 

 
 <button οnclick=" 
 assign 
 ()"> 
 加载新页面 
 </button> 

 
 <button οnclick=" 
 replace 
 ()"> 
 替换页面 
 </button> 

 
 <button οnclick=" 
 reload 
 1()"> 
 刷新当前页面 
 </button> 

 
 <button οnclick="reload2()"> 
 彻底刷新当前页面 
 </button> 

 
 </body> 

 
 <script> 

 
 function assign() { 

 
 /*可以返回老页面*/ 

 
 location.assign("http://baidu.com"); 

}

 
 function replace() { 

 
 /*不能返回老页面*/ 

 
 location.replace("http://baidu.com"); 

}

 
 function reload1() { 

 
 location.reload(); 

}

 
 function reload2() { 

 
 location 
 .reload(true) 
 ; 

}

 
 </script> 

 
  （2）window对象常用方法： 
 
  promp 
  t  
  提示框，提示框经常用于提示用户在进入页面前输入某个值 
  。 
 
  当提示框出现后，用户需要输入某个值，然后点击确认或取消  
 
  按钮才能继续操纵。 
 
  alert  
  警告框，警告框经常用于确保用户可以得到某些信息。 
 
  当警告框出现后，用户需要点击确定按钮才能继续进行操作。 
 
  confirm  
  确认框，确认框用于使用户可以验证或者接受某些信息。 
 
  当确认框出现后，用户需要点击确定或者取消按钮才能继续进行  
 
  操作。  
 
  close  
  打开页面 
 
  open  
  关闭页面 
 
  setTimeout  
  未来的某时执行代码， 
  但只会执行一次 
 
  setIntervar  
  根据指定的时间，循环执行 
 
  clearInterval  
  取消setIntervar  
 
  clearTimeOut   
  取消setTimeout 
 
  <body> 
 
  <button οnclick="close1()">关闭</button> 
 
  <button οnclick="openNewPage()">打开</button> 
 
  <button οnclick="show()">五秒后显示Hello World</button> 
 
  <button οnclick="cancelshow()">取消显示Hello World</button> 
 
  <button οnclick="cancelshow2()">取消循环显示Hello World</button> 
 
  </body> 
 
  <script> 
 
  var flag = 
    
  confirm 
  ( 
  "确认要删除此条信息吗？") 
 
  if (flag){ 
 
  alert 
  ("删除成功"); 
 
  }else { 
 
  alert("您已取消了删除"); 
 
  } 
 
  function close1() { 
 
  window.close 
  (); 
 
  } 
 
  function openNewPage() { 
 
  window.open 
  ("Demo38.html","BOM","width=300px,height=300px", 
 
  "left=20px") 
 
  } 
 
  /* 
  定时器：setTimeout：几秒钟后执行某一函数，但只会执行一次 
  */ 
 
  var hello; 
 
  function show() { 
 
  hello =  
  setTimeou 
  t(function () { 
 
  alert("Hello World"); 
 
  },5000); 
 
  } 
 
  function cancelshow() { 
 
  clearTimeout 
  (hello); 
 
  } 
 
  </script> 
 
  <script> 
 
  var hell2; 
 
  /* 
  定时器：setInterval:根据指定的时间，循环执行 
  */ 
 
  hell2 = 
   setInterval( 
  function () { 
 
  console.log("Hello World"); 
 
  },5000); 
 
  function cancelshow2() { 
 
  clearInterval 
  (hell2); 
 
  } 
 
  </script> 
 
   （3）screen对象：屏幕对象 
  
  <script> 
 
  console.log(screen. 
  width 
  );  
  屏幕的总宽度  
   
  console.log(screen. 
  height 
  );  
  屏幕的总高度 
 
  console.log(screen. 
  availWidth 
  );  
  可用的屏幕宽度 
 
  console.log(screen. 
  availHeight 
  );  
  可用的屏幕高度 
 
  </script> 
 
   （4）history对象：历史路径 
  
   function forward() { 
  
   history. 
   forward 
   (); /* 
   下一个页面 
   */ 
  
   } 
  
   function back() { 
  
   history. 
   back 
   (); /* 
   上一个页面 
   */ 
  
   } 
  
   function urlLength() { 
  
   history.length(); 
  
   } 
  
   function go(index) { 
  
   history 
   . 
   go 
   (index) 
   ; /* 
   往前跳几个页面*/ 
  
   } 
  
   <body> 
  
   <a href="Demo34.html">Demo34</a> 
  
   <button οnclick="forward()">下一个页面</button> 
  
   <button οnclick="go(2)">Demo35</button> 
  
   </body> 
  
   <script src="../../js/history.js"></script> 
  
    （5）Navigation：导航器对象 
   
   <script> 
  
   console.log(navigator. 
   appName 
   ); /* 
   产品名称 
   */ 
  
   console.log(navigator. 
   appVersion 
   ); /* 
   版本号 
   */ 
  
   console.log(navigator. 
   userAgen 
   t); /* 
   用户代理信息 
   */ 
  
   console.log(navigator. 
   platform 
   ); /* 
   系统平台信息 
   */ 
  
   </script>