前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第189天:BOM属性方法

第189天:BOM属性方法

作者头像
半指温柔乐
发布2018-09-11 09:51:27
3350
发布2018-09-11 09:51:27
举报
文章被收录于专栏:前端知识分享

一、BOM---location

1、访问页面

代码语言:javascript
复制
1 location.href = "http://www.baidu.com";
2 location.assign("http://www.baidu.com");
3 location.replace("http://www.baidu.com");

replace和assign的区别  replace()方法所做的操作与assign()方法一样,  但它多了一步操作,即从浏览器的历史记录中删除了包含脚本的页面,  这样就不能通过浏览器的后退按钮和前进按钮来访问它了, assign()方法却可以通过后退按钮来访问上个页面。

2、刷新页面

代码语言:javascript
复制
1 //刷新页面
2         document.getElementsByTagName('button')[1].onclick = function(){
3         location.reload(true);    //从服务器重载当前页面
4         location.reload(false);   //从浏览器缓存中重载当前页面
5         location.reload();        //从浏览器缓存中重载当前页面
6         }

3、其他属性

(1) hash:如果URL中包含有“#”,该方法将返回该符号之后的内容  (例如:http://www.itcast.cn/index.html#welcome的hash是“#welcome”)。

(2) host:服务器的名字,例如www.baidu.com。

(3) hostname:通常等于host,有时会省略前面的www。

(4) href:当前页面载入的完整URL

(5) pathname:URL中主机名之后的部分。例如:http://www.leledeng.com/html/js/index.html的pathname是“/html/js/index.html”。

(6) port:URL中声明的请求端口。默认情况下,大多数URL没有端口信息(默认为80端口),所以该属性通常是空白的。像http://www.leledeng.com:8080/index.html这样的URL的port属性为8080。

(7) protocol:URL中使用的协议,即双斜杠(//)之前的部分。例如http://www.itcast.cn中的protocol属性是http: (8) ftp://www.leledeng.com的protocol属性等于ftp:

(9)search:执行GET请求的URL中的问号?后的部分,又称查询字符串。 // 例如http://www.leledeng.com/search.html?name=lele中的search属性为?name=lele

二、BOM---history

代码语言:javascript
复制
 1 <body>
 2 <input type=button value=刷新 onclick="window.location.reload()">
 3 <input type=button value=前进 onclick="window.history.go(1)">
 4 <input type=button value=后退 onclick="window.history.go(-1)">
 5 <input type=button value=前进 onclick="window.history.forward()">
 6 <input type=button value=后退
 7        onclick="window.history.back()">
 8 <input type=button value=后退+刷新
 9        onclick="window.history.go(-1);window.location.reload()">
10 </body>

三、BOM---navigator

代码语言:javascript
复制
 1 <script>
 2 //    利用userAgent属性判断是哪个浏览器
 3     function CheckBrowser(){
 4         var u_agent = navigator.userAgent;
 5         var browser_name='未知浏览器';
 6         if(u_agent.indexOf('Firefox')>-1){
 7             browser_name='Firefox';
 8         }else if(u_agent.indexOf('Chrome')>-1){
 9             browser_name='Chrome';
10         }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
11             browser_name='IE11';
12         }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
13             browser_name='IE(8-10)';
14         }else if(u_agent.indexOf('MSIE')>-1){
15             browser_name='IE(6-7)';
16         }else if(u_agent.indexOf('Opera')>-1){
17             browser_name='Opera';
18         }else{
19             browser_name+=',info:'+u_agent;
20         }
21         document.write('浏览器类型为:'+browser_name+'<br>');
22         document.write('userAgent属性值为:'+u_agent+'<br>');
23     }
24 
25 CheckBrowser();
26 </script>

四、BOM---document

代码语言:javascript
复制
1 <script>
2     //对象集合属性
3     document.write("文档包含:"+document.forms.length+"个表单"+"<br />");
4     //forms[]对象集合统计表单个数
5     document.write(document.all.length+"<br />");//14
6     document.write(document.links[0]);//输出:http://www.baidu.com/
7 </script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、BOM---location
    • 1、访问页面
      • 2、刷新页面
      • 二、BOM---history
      • 四、BOM---document
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档