第189天:BOM属性方法

简介: 一、BOM---location1、访问页面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()方法却可以通过后退按钮来访问上个页面。

一、BOM---location

1、访问页面

1 location.href = "http://www.baidu.com";
2 location.assign("http://www.baidu.com");
3 location.replace("http://www.baidu.com");

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

2、刷新页面

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

 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

 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

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>

 

相关文章
|
2天前
|
云安全 人工智能 自然语言处理
AI说的每一句话,都靠谱吗?
阿里云提供AI全栈安全能力,其中针对AI输入与输出环节的安全合规挑战,我们构建了“开箱即用”与“按需增强”相结合的多层次、可配置的内容安全机制。
|
6天前
|
存储 人工智能 安全
AI 越智能,数据越危险?
阿里云提供AI全栈安全能力,为客户构建全链路数据保护体系,让企业敢用、能用、放心用
|
8天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
3天前
|
消息中间件 安全 NoSQL
阿里云通过中国信通院首批安全可信中间件评估
近日,由中国信通院主办的 2025(第五届)数字化转型发展大会在京举行。会上,“阿里云应用服务器软件 AliEE”、“消息队列软件 RocketMQ”、“云数据库 Tair”三款产品成功通过中国信通院“安全可信中间件”系列评估,成为首批获此认证的中间件产品。此次评估覆盖安全可信要求、功能完备性、安全防护能力、性能表现、可靠性与可维护性等核心指标,标志着阿里云中间件产品在多架构适配与安全能力上达到行业领先水平。
301 192
|
3天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
343 165
|
2天前
|
开发者
「玩透ESA」ESA启用和加速-ER在加速场景中的应用
本文介绍三种配置方法:通过“A鉴权”模板创建函数并设置触发器路由;在ESA上配置回源302跟随;以及自定义响应头。每步均配有详细截图指引,帮助开发者快速完成相关功能设置,提升服务安全性与灵活性。
302 2
|
7天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章!深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析,3分钟高效抓取134篇 AI Agent 文章,实现 AI 推荐、智能问答与知识沉淀,打造从数据获取到价值提炼的完整闭环。
457 93