首頁 web前端 js教程 html文檔中的location物件屬性理解及常見的用法_基礎知識

html文檔中的location物件屬性理解及常見的用法_基礎知識

May 16, 2016 pm 04:39 PM
html location

關於location物件的簡單理解:

1.location物件中涵蓋了目前頁面(本頁)或更直接的說,是目前載入的這個html文件的url資訊

2.location物件作為window物件的屬性,可以透過window.location老來存取

下面順便介紹一些URL(資源定位符)的相關資訊:

在瀏覽器中URL通常由下面幾個部分組成的:

[協定][host][path][query]

協定:常見的協定有:

http:// 表示資源檔案在網頁伺服器上

ftp://表示資源檔案在網路上的ftp伺服器

host:主機名稱以及連接埠號碼,例如本機tomcat常用的host:localhost:8080

path:專案的路徑訊息,一般是由「/」以及字元組成的,"/"為上下級關係

query:一般是以「?」開頭的,後面加上一些歌鍵值對(key=value)的形勢,多個鍵值對時用「&」隔開,可用於動態網頁,傳參數至伺服器端,用於後台有關操作,查詢資料庫條件等等,提交表格資料等等,都可以放在這裡提交,涉及安全性的東西需要另外搞定加密或透過其他方式。 。 。 。

query的後面還可以加入以「#」號開頭的參數,但是目前沒用到這個東西,暫時不隨便發表言論

location物件屬性:

1.href屬性:當前頁面的完整url信息,包括協議,主機名,端口號,查詢參數,#信息等等等,完整的都包含了

2.host屬性:主機名稱和連接埠號碼,例如localhost:8080本機

3.hostname:主機名稱

4.port:url中的連接埠號碼

5.pathname:url中的路徑內容包含「/」的那部分內容

6.protocol:協定

7.serach:以「?」開始的query部分內容

8.hash:以「#」開始的內容

location常見的用法

很顯然,除了可以給開發者便捷的屬性資訊以外,還有一個更重要和常用的用途

重新載入頁面,可以用來刷新文件內容,但是更重要的用途是,修改href資訊之後,重新載入文件內容

location.href:在賦值之後,瀏覽器會根據這個指定的全新的url,刷新文件的內容

location.reload():重新載入文件

協助我們解決頁面跨域的問題:

1.刷新目前的頁面

window.location.href =url//我習慣用這個方法

self.location.href =url

location.href =url

上述三個方法都可用來刷新當前頁面(根據指定的url重新加載,可以是另一個全新的文檔,替換當前文檔)

2.父親頁面中使用iframe包含了子頁面時

父頁刷新子頁:

window.frames["id"].location.reload()//id為頁中iframe的id

3.子頁面刷新父頁

parant.location.reload()

self.opener.location.reload()

方法有很多,隨著以後的實際使用繼續總結! ! ! !

其他常見方法:

location.replace() //使用新文件取代目前文件

location.assign() //載入新文件

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles