頁面 - 跳轉方法

location

• Location 接口表示其鏈接到的對象的位置（URL），構造函數
• Document 和 Window 接口都有這樣一個鏈接的Location，分別通過 Document.location和Window.location 訪問
  • 盡管 window.location 是一個只讀 Location 對象，你仍然可以賦給它一個 DOMString。window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同義詞 。
    • DOMString 是一個UTF-16字符串。由於JavaScript已經使用了這樣的字符串，所以DOMString 直接映射到 一個String
  • location = url（對未過期的資源直接讀取本地緩存），location.href = url （不檢查是否過期，一律發起請求進行協商緩存）（該特性未經驗證）
  • 安全設置，如 CORS（跨域資源共享），可能會限制實際加載新頁面。（谷歌、IE9 從百度跳轉新浪未發現限制）

屬性

• Location.href：包含整個URL，例如"http://ihrsit.midea.com/salary/ihr/salary/core/empBankSet"，賦值頁面實現跳轉
• Location.protocol：包含URL對應協議，例如："https:"
• Location.host：包含了域名，可能包括端口號，例如："www.baidu.com"
• Location.hostname：包含URL域名，不包含端口號
• Location.port：返回端口號，默認端口80時返回空字符串
• Location.pathname：包含URL中路徑部分，例如：“/system/ihr/system/agenda/agenda”
• Location.search：包含URL參數的一個DOMString，開頭有一個“?”，單獨設置該項能導致瀏覽器重新加載
• Location.hash：包含塊標識符的DOMString，開頭有一個“#”。
• Location.username：包含URL中域名前的用戶名的一個DOMString。例如https://anonymous:[e-mail] 該地址返回‘anonymous’
• Location.password：包含URL域名前的密碼，例如https://anonymous:[e-mail] 該地址返回'flabada'
• Location.origin：包含頁面的協議和域名（只讀），例如：'http://ihrsit.midea.com'

方法

Location.assign() 頁面跳轉

• 支持跨域跳轉
• 會觸發窗口加載並顯示指定的URL的內容
• 執行該方法的腳本文件的域和 Location 對象所在頁面的跨不同時會拋出錯誤（指通過window.opener.location操作來源location ？）

Location.reload()

• 重新加載來自當前 URL的資源
• 有一個特殊的可選參數，類型為 Boolean，該參數為true時會導致該方法引發的刷新一定會從服務器上加載數據。如果是 false或沒有制定這個參數，瀏覽器可能從緩存當中加載頁面。
  • 參數false或未加時，不檢查是否過期，一律發起請求進行協商緩存
  • 有兼容的差異，如果不生效，可以采用萬能的帶時間戳方式解決： location.reload(location.href + '?t=timeStamp')時間戳是通過查詢帶入的，而不是通過哈希
• 執行該方法的腳本文件的域和 Location 對象所在頁面的跨不同時會拋出錯誤（指通過window.opener.location操作來源location ？）

Location.replace()

• 用給定的URL替換掉當前的資源。
• 與 assign() 方法不同的是用 replace()替換的新頁面不會被保存在會話的歷史 History中
• 當傳入的url帶有#哈希時，蘋果瀏覽器似乎不能正確更改hash ？

Location.toString()

• 返回一個DOMString，包含整個URL

————————————————————

history

屬性

History.length

• 返回一個整數，該整數表示會話歷史中元素的數目，包括當前加載的頁。只讀

History.scrollRestoration

• 允許Web應用程序在歷史導航上顯式地設置默認滾動恢復行為。此屬性可以是自動的（auto）或者手動的（manual）。
• 實驗性屬性，IE和蘋果未實現
• 具體如何使用？等待擴展

History.state

• 返回一個表示歷史堆棧頂部的狀態的值。這是一種可以不必等待popstate 事件而查看狀態而的方式。
  • 假如頁面（通過pushState() 或 replaceState() 方法）設置了狀態對象而后用戶重啟了瀏覽器。那么當頁面重新加載時，頁面會接收一個onload事件，但沒有 popstate 事件。
• 通過History.pushState插入歷史條目時可以傳入state儲存在history對象中，普通url訪問該值返回null

方法

History.back()

• 前往上一頁, 用戶可點擊瀏覽器左上角的返回按鈕模擬此方法. 等價於 history.go(-1).
• 當瀏覽器會話歷史記錄處於第一頁時調用此方法沒有效果，而且也不會報錯。

History.forward()

• 在瀏覽器歷史記錄里前往下一頁，用戶可點擊瀏覽器左上角的前進按鈕模擬此方法. 等價於 history.go(1).
• 當瀏覽器歷史棧處於最頂端時( 當前頁面處於最后一頁時 )調用此方法沒有效果也不報錯。

History.go()

• 通過當前頁面的相對位置從瀏覽器歷史記錄( 會話記錄 )加載頁面。當前頁面的相對位置標志為0
• 如果當前頁為第一頁，前面已經沒有頁面了，我傳參的值為-1，那么這個方法沒有任何效果也不會報錯
• 沒有參數的 go() 方法或者不是整數的參數時也沒有效果。( 這點與支持字符串作為url參數的IE有點不同)。（IE是怎么支持字符串的？IE下history.go('www.baidu.com')並不能實現頁面跳轉）
• IE、谷歌下沒有參數會刷新當前頁面

History.pushState()

• 該方法向history添加了一條歷史記錄，url會改變，但是頁面不會重新加載，window.onpopstate不會被觸發

• 從History.pushState添加的記錄返回，或重新進入該記錄，url會改變，頁面依然不會重新加載，但是window.onpopstate將會被觸發

• 可以改變 document.referrer，它在用戶發送 XMLHttpRequest 請求時在HTTP頭部使用，改變state（狀態）后創建的 XMLHttpRequest 對象的referrer都會被改變。

  • 因為referrer是標識創建 XMLHttpRequest 對象時 this 所代表的window對象中document的URL。
  • referer報文頭，用來指明當前流量的來源參考頁。例如在www.sina.com.cn/sports/上點擊一個鏈接到達cctv.com首頁，那么就referrer就是www.sina.com.cn/sports/了

• pushState() 需要三個參數: 一個狀態對象, 一個標題 (目前被忽略), 和 (可選的) 一個URL.

  • 狀態對象：狀態對象可以是能被序列化的任何東西。狀態對象在序列化表示后有640k的大小限制。
    • 無論什么時候用戶導航到新的狀態，popstate事件就會被觸發（這句說明並不准確，popstate事件的觸發條件，在頁面進入相關事件文章中有詳細說明）。
  • 標題：目前忽略這個參數，建議傳入空字符串
  • URL：新URL不必須為絕對路徑。如果新URL是相對路徑，那么它將被作為相對於當前URL處理。新URL必須與當前URL同源，否則 pushState() 會拋出一個異常。該參數是可選的，缺省為當前URL。

• 注意 pushState() 絕對不會觸發 hashchange 事件，即使新的URL與舊的URL僅哈希不同也是如此。

// history.state 中包含了 stateObj 的一份拷貝（改變外部對象時該對象不會被改變）。
// 假設現在用戶又訪問了 http://google.com，然后點擊了返回按鈕。此時，地址欄將顯示 http://mozilla.org/bar.html，history.state 中包含了 stateObj 的一份拷貝。頁面此時展現為bar.html。
// 且因為頁面被重新加載了，所以popstate事件將不會被觸發。？（谷歌測試，popstate被觸發了，這里不明白）
let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

history.replaceState()

• history.replaceState() 的使用與 history.pushState() 非常相似，區別在於 replaceState() 是修改了當前的歷史記錄項而不是新建一個。
• 注意這並不會阻止其在全局瀏覽器歷史記錄中創建一個新的歷史記錄項。
  • 全局瀏覽器歷史記錄（WebExtensions history）是對用戶所訪問的頁面按時間順序進行的記錄和保存。（谷歌在菜單-歷史記錄中展現）

————————————————————

window.open

• open() 方法，創建一個新的瀏覽器窗口對象，如同使用文件菜單中的新窗口命令一樣。strUrl 參數指定了該窗口將會打開的地址。
• 調用window.open()方法以后，遠程 URL 不會被立即載入，載入過程是異步的。（實際加載這個URL的時間推遲到當前腳本塊執行結束之后。窗口的創建和相關資源的加載異步地進行。）
• 語法：let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
  • WindowObjectReference：打開的新窗口對象的引用。如果調用失敗，返回值會是 null 。如果父子窗口滿足“同源策略”，你可以通過這個引用訪問新窗口的屬性或方法。
    • 跨域的話也能獲取新窗口對象，但是無法訪問到內部資源，只能對窗口本身進行操作（谷歌）
    • 糾錯：IE下跨域能夠成功打開，不會拋出異常
  • strUrl：新窗口需要載入的url地址。strUrl可以是web上的html頁面也可以是圖片文件或者其他任何瀏覽器支持的文件格式。
    • strUrl設為空字符串時，可以在不改變窗口地址的情況下獲得一個已經打開的同名窗口的引用。（該說法在谷歌沒有校驗通過，結果是請看下一條）
    • 如果strUrl 是一個空值，那么打開的窗口將會是帶有默認工具欄的空白窗口（加載about:blank）。
  • strWindowName：新窗口的名稱。該字符串可以用來作為超鏈接 <a> 或表單 <form> 元素的目標屬性值。字符串中不能含有空白字符。注意：strWindowName 並不是新窗口的標題。
    • 如果已經存在以 strWindowName 為名稱的窗口，則不再打開一個新窗口，而是把 strUrl 加載到這個窗口中。並忽略參數 strWindowFeatures 。
    • 如果要在每次調用 window.open()時都打開一個新窗口，則要把參數 strWindowName 設置為 _blank
    • _self：在當前窗口顯示目標網頁
  • strWindowFeatures：可選參數。是一個字符串值，這個值列出了將要打開的窗口的一些特性(窗口功能和工具欄) 。 字符串中不能包含任何空白字符，特性之間用逗號分隔開。
    • 在窗口打開之后，就不能用JavaScript改變窗口的功能和工具欄的設置
    • 如果名稱是 strWindowName 的窗口不存在並且又沒有提供 strWindowFeatures 參數（或者 strWindowFeatures 參數為空字符串），則子窗口以父窗口默認的工具欄渲染。
    • 如果 strWindowFeatures 參數中沒有定義窗口大小，則新窗口的尺寸跟最近渲染的窗口尺寸一樣。
    • 如果 strWindowFeatures 參數中沒有定義窗口位置，則新窗口顯示在最近渲染的窗口的坐標偏移22個像素的位置。
    • 如果 strWindowFeatures 參數中沒有定義窗口位置，如果最近使用的窗口是最大化的，則沒有這22像素的偏移，新（子）窗口也會被最大化。
    • 如果你定義了 strWindowFeatures 參數，那么沒有在這個字符串中列出的特性會被禁用或移除 （除了 titlebar 和 close 默認設置為yes）（新打開的窗口才有效，可以禁用工具欄等）
    • 包含的選項不詳解請參考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

window.open(
    "https://www.domainname.ext/path/ImageFile.png",
    "DescriptiveWindowName",
    "resizable,scrollbars,status"
);

————————————————————

標簽a

• 可以創建通向其他網頁、文件、同一頁面內的位置、電子郵件地址或任何其他 URL 的超鏈接。
• a標簽跳轉的本質應該和修改location是一致的

屬性

download

• 此屬性指示瀏覽器下載 URL 而不是導航到它，因此將提示用戶將其保存為本地文件
• 如果屬性有一個值，那么此值將在下載保存過程中作為預填充的文件名
  • 此屬性對允許的值沒有限制，但是 / 和 \ 會被轉換為下划線
  • 大多數文件系統限制了文件名中的標點符號，故此，瀏覽器將相應地調整建議的文件名
  • 如果 HTTP 頭中的 Content-Disposition 屬性賦予了一個不同於此屬性的文件名，HTTP 頭屬性優先於此屬性。
  • 如果 HTTP 頭屬性 Content-Disposition 被設置為inline（即 Content-Disposition='inline'），那么 Firefox 優先考慮 HTTP 頭 Content-Dispositiondownload 屬性。
• 此屬性僅適用於同源 URL
• 盡管 HTTP URL 需要位於同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內容（例如使用在線繪圖 Web 應用程序創建的照片）。

// 允許用戶下載一個HTML畫布，你可以創建一個下載屬性和畫布數據作為文件URL鏈接圖像：
var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

href

• 包含超鏈接指向的 URL 或 URL 片段。
  • URL 片段是哈希標記（#）前面的名稱，哈希標記指定當前文檔中的內部目標位置（HTML 元素的 ID）。
    • 可以使用 href="#top" 或者 href="#" 鏈接返回到頁面頂部。
  • URL 不限於基於 Web（HTTP）的文檔，也可以使用瀏覽器支持的任何協議。例如，在大多數瀏覽器中正常工作的file:、ftp:和mailto：。
    • 任何標准的郵件頭字段可以被添加到你提供的郵件URL。 其中最常用的是主題(subject)、抄送(cc)和主體(body) (這不是一個真正的頭字段，但允許您為新郵件指定一個短內容消息)。
    • 參考https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

<a href="https://example.com">Website</a>
<a href="mailto:[e-mail]">Email</a> // 電子郵件
<a href="tel:[phone]">Phone</a> // 電話

• "javascript:void(0)" 被濫用，會在拖動 / 復制鏈接時導致意外行為，會向輔助技術（如屏幕閱讀器）傳達不正確的語義，推薦使用 <button> 來代替。通常情況下，您應該只將錨點用於正常的 URL 導航。

hreflang

• 該屬性用於指定鏈接文檔的人類語言。其僅提供建議，並沒有內置的功能。？

ping

• 包含一個以空格分隔的url列表，當跟隨超鏈接時，將由瀏覽器(在后台)發送帶有正文 PING 的 POST 請求。通常用於跟蹤。（正文 PING 是什么？）

referrerpolicy

• 表明在獲取URL時發送哪個提交者（referrer）
  • "no-referrer" 表示 Referer: 頭將不會被發送。
  • "no-referrer-when-downgrade" 表示當從使用HTTPS的頁面導航到非 HTTPS 頁面時不會發送 Referer: 頭。如果沒有指定策略，這將是用戶代理的默認行為。
  • "origin" 表示 referrer將會是頁面的來源，大致為這樣的組合：主機和端口（不包含具體的路徑和參數的信息）。
  • "strict-origin-when-cross-origin" 表示導航到其它源將會限制為這種組合：主機 + 端口，而導航到相同的源將會只包含 referrer的路徑。（參數可能是origin-when-cross-origin）
  • "unsafe-url" 表示 referrer將會包含源和路徑（domain + path）（但是不包含密碼或用戶名的片段）。這種情況是不安全的，因為它可能會將安全的URLs數據泄露給不安全的源。

rel

• 該屬性指定了目標對象到鏈接對象的關系。該值是空格分隔的列表類型值。
• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types

target

• 該屬性指定在何處顯示鏈接的資源。

  • _self: 當前頁面加載，此值是默認的，如果沒有指定屬性的話。
  • _blank: 新窗口打開，即到一個新的未命名的窗口或瀏覽器上下文
    • 將在與您的頁面相同的進程上運行新頁面，要避免這種情況，請使用rel=noopener。
    • 因為是同一個進程，所以新窗口能夠通過 window.opener 訪問到來源頁的winodw對象
  • _parent: 加載響應到當前的瀏覽上下文的父瀏覽上下文。如果沒有瀏覽上下文，此選項的行為方式與 _self 相同。
  • _top: 加載響應進入頂層瀏覽上下文（即，瀏覽上下文，它是當前的一個的祖先，並且沒有parent）。如果沒有parent框架或者瀏覽上下文，此選項的行為方式相同_self

• 使用target時，考慮添加 rel="noopener noreferrer" 以防止針對 window.opener API 的惡意行為。

  • noopener: 指示瀏覽器打開鏈接，而不向打開鏈接的文檔授予新的瀏覽上下文訪問權限-不在打開的窗口上設置window.opener屬性（返回空）。
  • noreferrer:阻止瀏覽器跳到另一個頁面時，通過HTTP頭，發送當前頁面的名字或其他值，以及把當前頁設為另一個頁面的引用(另一個頁面的referrer值 )。

type

• 該屬性指定在一個 MIME type 鏈接目標的形式的媒體類型。其僅提供建議，並沒有內置的功能。
  • MIME type （現在稱為“媒體類型(media type)”，但有時也是“內容類型(content type)”）是指示文件類型的字符串，與文件一起發送（例如，一個聲音文件可能被標記為 audio/ogg ，一個圖像文件可能是 image/png ）。它與傳統Windows上的文件擴展名有相同目的。

————————————————————

標簽area

• 在圖片上定義一個熱點區域，可以關聯一個超鏈接。
• <area>元素僅在<map>元素內部使用。
• 它是一個空的元素不允許嵌套任何子元素或者文本。

屬性

alt

• 在未顯示圖像的瀏覽器上顯示代替的文本字符串。在href 屬性被使用的時候才是必需的。

coords

• 給熱點區域設定具體的坐標值。
• 對於矩形或長方形, 這個coords 值為兩個X,Y對：左上、右下。
• 對於圓形, 這個值是 x,y,r ，這里的 x,y 是一對確定圓的中心的坐標而 r 則表示的是半徑值.。
• 對於多邊和多邊形，這個值是用x,y對表示的多邊形的每一個點：x1,y1,x2,y2,x3,y3,等等。
• HTML4里, 值可能是像素數量或者百分比, 區別是不是有%出現; HTML5里, 只可能是像素的數量.

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

download

• 這個屬性如果存在的話, 表明作者想把超鏈接用於下載一個資源。（同a 標簽）

href

• area的超鏈接, 值為一個URL.

hreflang

• 指明鏈接資源的語言類型，這個屬性只能在指明href屬性之后使用.

media

• 指明鏈接資源的媒體類型，例：print and screen。如果此屬性省略，默認全部。僅在href屬性存在情況下使用。

rel

• 對於包含href屬性的錨，該屬性指定目標對象與鏈接對象的關系。該值是一個逗號分隔的鏈接類型值列表。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
• 這些值及其語義將由一些可能對文檔作者有意義的權威進行注冊。
• 如果沒有其他的關系，默認的關系是無效的。
• 只有當href屬性存在時時才使用該屬性

shape

• 相關聯的熱點的形狀。
• rect，它定義了一個矩形區域
• default：規定全部區域。
• circle：定義圓形。
• poly：定義多邊形區域。

target

• 本屬性指明了在什么地方顯示鏈接的資源（參考標簽a）
• 本屬性只能在指明href屬性之后使用.

type

• 該屬性指定了用於鏈接目標的MIME類型的媒體類型。
• 在未來，瀏覽器可能會為多媒體類型添加一個小圖標。例如，當類型設置為音頻/wav時，瀏覽器可能會添加一個小的揚聲器圖標。
• 只有當href屬性存在時才使用該屬性。

————————————————————

標簽map

• 與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區域).

屬性

name

• name屬性 給map一個名字用來查詢，這個屬性是必須的，值必須不能為空並且不能帶空格。
• name屬性不准與同文檔中其他map元素的值相同，如果id屬性也被添加，name屬性和id屬性的值必須相同。

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>