「文字片段」可讓您在網址片段中指定文字片段。 瀏覽含有這類文字片段的網址時,瀏覽器可以強調 和/或吸引使用者的注意力
片段 ID
Chrome 80 版本是重大版本,其中包含許多備受期待的功能,例如 Web Workers 中的 ECMAScript 模組, 空值合併、 選用鏈結等等。這邊的版本跟往常一樣 透過 網誌文章 Chromium 網誌。您可以在下方的螢幕截圖中查看網誌文章摘錄。
您可能想知道所有紅色方塊代表的意義。是執行
下列程式碼片段。它會醒目顯示所有具有 id
屬性的元素。
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
我也可以插入任何以紅色方塊醒目顯示的元素深層連結
片段 ID
以便我將這項功能用於
指定網頁網址如果要開啟「提供意見」連結,
「產品論壇」方塊
我也可以手動把網址
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1
。
如同開發人員工具的「元素」面板所示,有問題的元素具有 id
屬性值為 HTML1
。
如果我使用 JavaScript 的 URL()
建構函式剖析這個網址,就會顯示不同元件。
請注意,hash
屬性含有 #HTML1
值。
new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
hash: "#HTML1"
host: "blog.chromium.org"
hostname: "blog.chromium.org"
href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
origin: "https://blog.chromium.org"
password: ""
pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
雖然我必須開啟開發人員工具,才能找出元素的 id
朗讀了磁碟區
深入瞭解 此特定章節後,由
網誌文章
如果要連結至沒有 id
的項目,該怎麼做?假設我想連結到 ECMAScript 模組
標題。如以下螢幕截圖所示,相關 <h1>
不會
具有 id
屬性,表示我無法連結至這個標題。這就是問題所在
文字片段解析。
文字片段
文字片段提案新增對 在網址雜湊中指定文字片段。瀏覽至含有這類文字片段的網址時, 使用者代理程式可以強調和/或吸引使用者的注意力
瀏覽器相容性
基於安全性,這項功能規定使用者必須在
noopener
背景資訊。
因此,請務必加入
rel="noopener"
在您的
<a>
錨點或新增
將 noopener
傳送到
Window.open()
視窗功能清單。
start
文字片段的最簡單語法如下:雜湊符號 #
後面接著
:~:text=
和 start
,代表
百分比編碼
我想連結文字
#:~:text=start
舉例來說,假設我想連結至「Web Workers 中的 ECMAScript 模組」標題 發表 Chrome 80 版新功能的網誌文章 在此情況下,網址會是:
文字片段強調類似這樣, 在 Chrome 等支援瀏覽器中按一下該連結時,系統會醒目顯示該文字片段, 捲動至檢視區塊:
start
和end
如果我要連結至名為 Web Workers 中的 ECMAScript 模組的整個章節,而不是 變成標題?對區段的全部文字進行百分比編碼後,就可以得出的結果網址 不是那麼長
幸好有更好的方法。與其使用全部文字,我可以使用
start,end
語法。因此,我會在開頭指定幾個百分比編碼的字詞
所需文字,以及所需文字結尾加上幾個百分比編碼的字詞,並以半形逗號分隔
逗號 ,
。
看起來會像這樣:
以 start
來說,我依序有 ECMAScript%20Modules%20in%20Web%20Workers
、半形逗號 ,
和半形逗號
由 ES%20Modules%20in%20Web%20Workers.
以 end
格式上傳。當您點選支援的瀏覽器時
和 Chrome 一樣,整個部分都會醒目顯示,然後捲動至檢視畫面中:
現在你可能會好奇我選擇的 start
和 end
。其實,較短的網址
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.
敬上
兩邊只輸入兩個字詞
效果也很不錯比較 start
和 end
與
先前的值
如果我採取進一步的做法,現在 start
和 end
都使用一個字詞,你可以
您會發現我有麻煩了網址
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.
敬上
縮短了,但醒目顯示的文字片段已不是原本想要的片段。
系統會在「Workers.
」這個字詞第一個出現時停止醒目顯示文字,但這個字詞正確,但我不是
用於突顯重點問題在於,您要指定的片段並不是
目前的單字 start
和 end
值:
prefix-
和-suffix
為 start
和 end
使用過長的值是取得不重複連結的解決方案。
但在某些情況下無法這麼做。另外,我為什麼要選擇
Chrome 80 發布網誌文章做為我的範例答案就是這個版本的「文字片段」
版本:
請注意螢幕截圖中的「text」字樣出現 4 次第 4 次
綠色程式碼字型如果要連結這個特定字詞,將 start
至 text
。自「text」一詞是,只有一個字,不可以有 end
。該怎麼辦?
網址
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
敬上
與「文字」字詞的第一個出現比對相符標題中:
幸好有解決方法。在這種情況下,我可以指定 prefix-
和 -suffix
。
綠色代碼字型「text」前一字是「the」,之後的單字是「parameter」。以上皆非
其他三個字詞「text」字詞的周圍字詞也相同用這個星球發動攻擊
我們知道,我可以調整先前的網址並新增 prefix-
和 -suffix
。對另一半
參數也必須經過百分比編碼,而且可包含多個字詞。
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter
。
為了讓剖析器清楚識別 prefix-
和 -suffix
,這兩個項目必須分隔出去
由 start
和選用的 end
搭配破折號 -
。
完整語法
文字片段的完整語法如下所示。(方括號表示選用參數)。
所有參數值都必須使用百分比編碼。這對破折號來說特別重要
-
、& 符號和 &
和半形逗號 ,
字元,因此不會被解讀為文字的一部分
指令語法。
#:~:text=[prefix-,]start[,end][,-suffix]
prefix-
、start
、end
和 -suffix
每個項目都只會比對單一文字內的文字
區塊層級元素
但完整的 start,end
範圍「可以」橫跨多個區塊。例如:
:~:text=The quick,lazy dog
不相符,因為開頭
字串「The Quick」皆不在單一、不中斷的區塊層級元素中:
<div>
The
<div></div>
quick brown fox
</div>
<div>jumped over the lazy dog</div>
不過,這項範例相符如以下範例所示:
<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>
使用瀏覽器擴充功能建立文字片段網址
手動建立文字片段網址的做法很繁瑣,尤其是確認網址是為了確認 。如果需要的話,規格可以提供一些訣竅 產生文字片段網址的步驟。 我們提供開放原始碼的瀏覽器擴充功能 文字片段連結: 只要選取文字,然後按一下 [複製連結至所選文字] 即可將其連結至任何文字。在使用情境中 或前往 Google 試算表選單這項擴充功能適用於下列瀏覽器:
,瞭解如何調查及移除這項存取權。使用同一個網址處理多個文字片段
請注意,同一個網址可以顯示多個文字片段。特定的文字片段
並以 &
字元分隔。以下是含有三個文字片段的連結範例:
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet
。
混合元素和文字片段
傳統元素片段可以與文字片段合併使用。您可以同時
,以提供有意義的備用文字,以因應網頁上的原始文字
使文字片段不再相符網址
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.
敬上
請到這裡的「請提供寶貴意見」連結
產品論壇專區
包含元素片段 (HTML1
) 和文字片段
(text=Give%20us%20feedback%20in%20our%20Product%20Forums.
):
片段指令
我尚未說明的語法中有一個元素:片段指令 :~:
。為了避免
如上所示,
文字片段規格導入了片段
指令。片段指令是部分網址片段,以程式碼序列分隔
:~:
。這個值會保留用於使用者代理程式操作說明 (例如 text=
),並從網址中移除
載入期間,因此作者指令碼無法直接與它互動。使用者代理程式操作說明如下
(也稱為指令)。在具體案例中,text=
因此稱為「文字指令」。
特徵偵測
如要偵測支援情形,請在 document
上測試唯讀 fragmentDirective
屬性。片段
指示詞是網址的機制,可以為瀏覽器指定指示,而非導向
文件。避免與作者指令碼直接互動,因此日後的使用者代理程式
並附上任何指示,不必擔心會對現有內容造成破壞性變更。一
像是翻譯提示等等
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
功能偵測主要適用於動態產生連結 (例如 搜尋引擎),避免將文字片段連結至不支援這類程式碼的瀏覽器。
設定文字片段樣式
根據預設,瀏覽器會設定與文字片段相同的樣式
mark
(通常是黃色的黑色,
CSS 系統顏色
(mark
))。使用者代理程式樣式表包含的 CSS,如下所示:
:root::target-text {
color: MarkText;
background: Mark;
}
如您所見,瀏覽器會提供虛擬選取器
::target-text
,您可以用來
自訂套用的醒目顯示項目舉例來說,您可以將文字片段設計成黑色
並排顯示紅色背景的文字和往常一樣,請務必
檢查色彩對比
因此,覆寫樣式不會造成無障礙功能問題,並確保醒目顯示內容實際上
讓視覺元素脫穎而出
:root::target-text {
color: black;
background-color: red;
}
多元包容性
文字片段功能在某些程度上可以進行折線填滿。我們提供 polyfill,會在內部 擴充功能,適用於不支援 為文字片段提供內建支援,這項功能是以 JavaScript 實作。
產生程式輔助文字片段連結
polyfill 包含檔案
您可以匯入並用來產生文字片段連結的 fragment-generation-utils.js
。這是
如以下程式碼範例所示:
const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
let url = `${location.origin}${location.pathname}${location.search}`;
const fragment = result.fragment;
const prefix = fragment.prefix ?
`${encodeURIComponent(fragment.prefix)}-,` :
'';
const suffix = fragment.suffix ?
`,-${encodeURIComponent(fragment.suffix)}` :
'';
const start = encodeURIComponent(fragment.textStart);
const end = fragment.textEnd ?
`,${encodeURIComponent(fragment.textEnd)}` :
'';
url += `#:~:text=${prefix}${start}${end}${suffix}`;
console.log(url);
}
取得用於數據分析的文字片段
許多網站都會使用片段進行轉送,因此瀏覽器會移除文字片段 以免破壞這些網頁另有 已確認的需求 向網頁顯示文字片段連結,例如進行分析 但目前尚未實作提議的解決方案 目前先使用以下程式碼 並輸入所需資訊
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
安全性
文字片段指令只有在發生完整 (非相同網頁) 瀏覽時,才能叫用
a
使用者啟用。
此外,如果導覽來源與目的地不同,就需要
以便進行
noopener
背景資訊,例如
確認到達網頁已充分隔離。只有文字片段指令
已套用至主影格也就是說,系統不會在 iframe 和 iframe 內搜尋文字
導覽動作不會叫用文字片段。
隱私權
請務必確保 Text Fragments 規格的實作不會洩漏文字
網頁上是否有片段。雖然元素片段完全由
任何人都可以建立文字片段;在我的範例中,還記得
沒有辦法連結至 Web Workers 中的 ECMAScript 模組標題,因為 <h1>
沒有 id
,但任何人 (包括我在內) 都能透過精心打造
文字片段?
假設我放送了一個邪惡廣告聯播網,evil-ads.example.com
。再假設有一則廣告
我利用文字動態建立對 dating.example.com
的隱藏跨來源 iframe
片段網址
dating.example.com#:~:text=Log%20Out
因為使用者與廣告互動後如果畫面上顯示「登出」字樣我知道受害者目前就在
已登入 dating.example.com
,可用於剖析使用者。既然文字
實作片段時,可能會判定成功的相符結果應導致焦點切換,
evil-ads.example.com
我可以監聽 blur
事件,進而知道發生配對的時間。於
為滿足上述情況,我們在 Chrome 中實作「文字片段」的方式不盡其一。
另一種攻擊可能是根據捲動位置入侵網路流量。假設我能夠
受害者的網路流量記錄,例如公司內部網路的管理員。想像一下
目前已有一份長篇人力資源說明文件「如果遭受攻擊該怎麼辦...」,然後
例如 燒掉、焦慮等。我可以將追蹤像素放在
請參考閱讀清單,進一步瞭解
如何選擇 Kubeflow Pipelines SDK 或 TFX如果我們接著判斷載入文件時,
追蹤像素旁邊顯示「消耗」項目,我接下來能以內部網路管理員的身分判斷要處理的
員工點選與員工有關的:~:text=burn%20out
文字片段連結
可能會認定為機密內容,並未公開顯示因為這個範例
問題持續發生,因為入侵行為需要符合非常的特定先決條件。
Chrome 安全性團隊進行評估,評估是否導入捲動導覽功能的風險。
其他使用者代理程式可能會決定改為顯示手動捲動的 UI 元素。
如果網站不希望瀏覽器顯示上述資訊,Chromium 會支援 文件政策 可傳送給使用者代理程式的標頭值,因此使用者代理程式不會處理文字片段網址。
Document-Policy: force-load-at-top
停用文字片段
如要停用此功能,最簡單的方法是使用可插入 HTTP 回應的擴充功能 標題 ModHeader (非 Google 產品) 如何插入回應 (「不是」要求) 標頭,如下所示:
Document-Policy: force-load-at-top
另一種方式的停用方法是使用企業設定
ScrollToTextFragmentEnabled
。
如要透過 macOS 執行這項操作,請在終端機中貼上以下指令。
defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
如果使用 Windows,請按照 Google Chrome Enterprise 說明支援 網站。
網頁搜尋中的文字片段
針對某些搜尋,Google 搜尋引擎會提供快速解答或內容摘要 程式碼片段這些精選摘要最有可能出現在搜尋時顯示 就是透過問句的形式按一下精選摘要後,系統會將使用者直接導向精選摘要 來源網頁上的摘要文字這都要歸功於自動建立的文字片段網址。
,瞭解如何調查及移除這項存取權。結論
文字片段網址是一項強大的功能,可以連結網頁上的任意文字。學術 社群也能使用它來提供非常準確的引文或參考連結。搜尋引擎 藉此建立網頁上文字搜尋結果的深層連結。可以供使用者分享 網頁的特定段落 而不是無法存取的螢幕截圖希望你開始行動 使用文字片段網址 這些內容就能派上用場請務必安裝 Text Fragment 連結瀏覽器 。
相關連結
特別銘謝
文字片段是由 Nick Burris 和 David Bokan (作者:Bokan) Grant Wang。感謝 Joe Medley 會仔細閱讀這篇文章主頁橫幅由 Greg Rakozy 提供 Unsplash。