1. 程式人生 > >第189天:BOM屬性方法

第189天:BOM屬性方法

刷新 記錄 nts firefox sig () 利用 方法 class

一、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>

第189天:BOM屬性方法