Mảnh văn bản cho phép bạn chỉ định một đoạn mã văn bản trong mảnh URL. Khi điều hướng đến một URL có một mảnh văn bản như vậy, trình duyệt có thể nhấn mạnh và/hoặc thu hút sự chú ý của người dùng.
Giá trị nhận dạng mảnh
Chrome 80 là một bản phát hành lớn. Giao diện này có chứa một số tính năng được nhiều người mong đợi như Mô-đun ECMAScript trong Web Workers, kết hợp rỗng, chuỗi không bắt buộc và nhiều tính năng khác. Như thường lệ, bản phát hành được thông báo qua một bài đăng trên blog trên blog Chromium. Bạn có thể thấy phần trích dẫn của bài đăng trên blog trong ảnh chụp màn hình bên dưới.
id.Có thể bạn đang tự hỏi tất cả các hộp màu đỏ có nghĩa là gì. Chúng là kết quả của việc chạy đoạn mã sau đây trong Công cụ cho nhà phát triển. Thao tác này sẽ làm nổi bật tất cả phần tử có thuộc tính id.
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
Tôi có thể đặt một đường liên kết sâu đến bất kỳ phần tử nào được làm nổi bật bằng hộp màu đỏ nhờ vào mã nhận dạng mảnh mà sau đó tôi dùng trong hàm băm của URL của trang. Giả sử tôi muốn liên kết sâu đến ô Cung cấp ý kiến phản hồi cho chúng tôi trong Diễn đàn về sản phẩm bên cạnh đó, tôi có thể thực hiện bằng cách tạo URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 theo cách thủ công.
Như bạn có thể thấy trong bảng điều khiển Phần tử của Công cụ cho nhà phát triển, phần tử được đề cập có thuộc tính id với giá trị HTML1.
id của một phần tử.Nếu tôi phân tích cú pháp URL này bằng hàm khởi tạo URL() của JavaScript, thì các thành phần khác nhau sẽ hiển thị.
Hãy lưu ý thuộc tính hash có giá trị #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: ""
}
*/
Mặc dù việc tôi phải mở Công cụ cho nhà phát triển để tìm id của một phần tử đã cho thấy nhiều khả năng tác giả của bài đăng trên blog này liên kết đến phần cụ thể này của trang.
Nếu tôi muốn liên kết với một nội dung nào đó mà không có id thì sao? Giả sử tôi muốn liên kết đến tiêu đề Mô-đun ECMAScript trong Web Workers. Như bạn có thể thấy trong ảnh chụp màn hình bên dưới, <h1> được đề cập không có thuộc tính id, nghĩa là tôi không thể liên kết đến tiêu đề này. Đây là vấn đề mà Mảnh văn bản giải quyết.
id.Mảnh văn bản
Đề xuất Phân đoạn văn bản hỗ trợ thêm việc chỉ định đoạn mã văn bản trong hàm băm URL. Khi điều hướng đến một URL có một mảnh văn bản như vậy, tác nhân người dùng có thể nhấn mạnh và/hoặc khiến người dùng chú ý.
Khả năng tương thích với trình duyệt
Vì lý do bảo mật, tính năng này yêu cầu bạn phải mở đường liên kết trong ngữ cảnh noopener.
Do đó, hãy nhớ đưa rel="noopener" vào mã đánh dấu neo <a> hoặc thêm noopener vào danh sách Window.open() tính năng liên quan đến chức năng của cửa sổ.
start
Ở dạng đơn giản nhất, cú pháp của Mảnh văn bản như sau: Biểu tượng băm # theo sau là :~:text= và cuối cùng là start, đại diện cho văn bản được mã hoá theo phần trăm mà tôi muốn liên kết.
#:~:text=start
Ví dụ: giả sử tôi muốn liên kết đến tiêu đề Mô-đun ECMAScript trong Web Workers trong bài đăng trên blog thông báo các tính năng trong Chrome 80, thì URL trong trường hợp này sẽ là:
Mảnh văn bản được nhấn mạnh như thế này. Nếu bạn nhấp vào đường liên kết trong một trình duyệt hỗ trợ như Chrome, thì mảnh văn bản sẽ được làm nổi bật và cuộn vào khung hiển thị:
start và end
Giờ nếu tôi muốn liên kết đến toàn bộ phần có tiêu đề Mô-đun ECMAScript trong Web Workers, chứ không chỉ chỉ tiêu đề của nó thì sao? Mã hoá theo tỷ lệ phần trăm toàn bộ văn bản của phần sẽ làm cho URL kết quả dài đến mức khó tin.
Thật may là có một cách tốt hơn. Thay vì toàn bộ văn bản, tôi có thể tạo khung văn bản mong muốn bằng cú pháp start,end. Do đó, tôi chỉ định một vài từ được mã hoá theo tỷ lệ phần trăm ở đầu văn bản mong muốn và một vài từ được mã hoá theo tỷ lệ phần trăm ở cuối văn bản mong muốn, được phân tách bằng dấu phẩy ,.
Đoạn mã này sẽ có dạng như sau:
Đối với start, tôi có ECMAScript%20Modules%20in%20Web%20Workers, sau đó là dấu phẩy , theo sau là ES%20Modules%20in%20Web%20Workers. là end. Khi bạn nhấp vào một trình duyệt hỗ trợ như Chrome, toàn bộ phần đó sẽ được đánh dấu và cuộn vào khung hiển thị:
Bây giờ, có thể bạn sẽ thắc mắc về lựa chọn của tôi về start và end. Trên thực tế, URL ngắn hơn một chút https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. chỉ có hai từ mỗi bên cũng sẽ mang lại hiệu quả. So sánh start và end với các giá trị trước đó.
Nếu tôi tiến thêm một bước và hiện chỉ sử dụng một từ cho cả start và end, thì bạn có thể thấy rằng tôi đang gặp rắc rối. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. hiện đã ngắn hơn, nhưng phân đoạn văn bản được đánh dấu không còn là đoạn mong muốn ban đầu. Việc đánh dấu dừng lại ở lần xuất hiện đầu tiên của từ Workers.. Điều này là chính xác, nhưng không phải là nội dung tôi muốn nhấn mạnh. Vấn đề là phần mong muốn không được xác định duy nhất bởi các giá trị gồm một từ start và end hiện tại:
prefix- và -suffix
Việc sử dụng các giá trị đủ dài cho start và end là một giải pháp để có được một đường liên kết duy nhất.
Tuy nhiên, trong một số trường hợp, bạn không thể làm như vậy. Lưu ý thêm, tại sao tôi chọn
bài đăng trên blog về bản phát hành Chrome 80 làm ví dụ? Câu trả lời là các Mảnh văn bản trong bản phát hành này đã được ra mắt:
Hãy lưu ý cách từ "văn bản" xuất hiện 4 lần trong ảnh chụp màn hình phía trên. Lần xuất hiện thứ tư được viết bằng phông chữ mã màu xanh lục. Nếu muốn liên kết đến từ cụ thể này, tôi sẽ đặt start thành text. Vì từ "văn bản" chỉ có một từ nên không thể có end. Chuyện gì sẽ xảy ra bây giờ? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text khớp ở lần xuất hiện đầu tiên của từ "Văn bản" đã có trong tiêu đề:
Thật may là có một giải pháp. Trong những trường hợp như thế này, tôi có thể chỉ định prefix- và -suffix. Từ trước phông chữ mã màu xanh lục "text" là "the" và từ sau là "parameter". Không có từ nào trong số 3 lần xuất hiện khác của từ "văn bản" có cùng các từ xung quanh. Với kiến thức này, tôi có thể điều chỉnh URL trước đó cũng như thêm prefix- và -suffix. Giống như các tham số khác, các tham số này cũng cần được mã hoá theo phần trăm và có thể chứa nhiều từ.
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter.
Để cho phép trình phân tích cú pháp xác định rõ ràng prefix- và -suffix, chúng cần được phân tách với start và end không bắt buộc bằng dấu gạch ngang -.
Cú pháp đầy đủ
Dưới đây là cú pháp đầy đủ của Mảnh văn bản. (Dấu ngoặc vuông biểu thị một tham số không bắt buộc.)
Giá trị cho tất cả thông số cần được mã hoá phần trăm. Điều này đặc biệt quan trọng đối với các ký tự dấu gạch ngang -, ký hiệu và & cũng như dấu phẩy ,, vì vậy, các ký tự này không được hiểu là một phần của cú pháp lệnh trong văn bản.
#:~:text=[prefix-,]start[,end][,-suffix]
Mỗi prefix-, start, end và -suffix sẽ chỉ khớp văn bản trong một phần tử cấp khối duy nhất, nhưng toàn bộ start,end phạm vi có thể kéo dài nhiều khối. Ví dụ: :~:text=The quick,lazy dog sẽ không khớp trong ví dụ sau, vì chuỗi bắt đầu "Quick" không xuất hiện trong một phần tử duy nhất cấp khối không gián đoạn:
<div>
The
<div></div>
quick brown fox
</div>
<div>jumped over the lazy dog</div>
Tuy nhiên, giá trị này khớp với trong ví dụ sau:
<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>
Tạo URL mảnh văn bản bằng tiện ích của trình duyệt
Việc tạo URL mảnh văn bản theo cách thủ công rất tẻ nhạt, đặc biệt là khi phải đảm bảo rằng các URL đó là riêng biệt. Nếu bạn thực sự muốn, phần đặc tả kỹ thuật có một số mẹo và liệt kê chính xác các bước tạo URL phân đoạn văn bản. Chúng tôi cung cấp một tiện ích trình duyệt nguồn mở có tên Link to Text Fragment (Liên kết đến mảnh văn bản) cho phép bạn liên kết đến bất kỳ văn bản nào bằng cách chọn văn bản đó, sau đó nhấp vào "Sao chép đường liên kết đến văn bản đã chọn" trong trình đơn ngữ cảnh. Tiện ích này dùng được cho các trình duyệt sau:
- Liên kết đến mảnh văn bản trong Google Chrome
- Liên kết đến mảnh văn bản trên Microsoft Edge
- Liên kết đến Mảnh Văn bản trong Mozilla Firefox
- Liên kết đến mảnh văn bản của Apple Safari
Nhiều đoạn văn bản trong một URL
Xin lưu ý rằng nhiều đoạn văn bản có thể xuất hiện trong một URL. Các đoạn văn bản cụ thể cần được phân tách bằng ký hiệu và &. Dưới đây là ví dụ về một đường liên kết có 3 mảnh văn bản: 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.
Kết hợp các đoạn văn bản và phần tử
Bạn có thể kết hợp các mảnh phần tử truyền thống với các mảnh văn bản. Hoàn toàn không có vấn đề gì khi có cả hai trong cùng một URL, chẳng hạn như để cung cấp một phương án dự phòng có ý nghĩa trong trường hợp văn bản gốc trên trang thay đổi, khiến đoạn văn bản không khớp nữa. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. liên kết đến phần Cung cấp ý kiến phản hồi cho chúng tôi trong phần Diễn đàn sản phẩm chứa cả mảnh phần tử (HTML1) và mảnh văn bản (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):
Lệnh mảnh
Có một phần tử trong cú pháp mà tôi chưa giải thích: lệnh mảnh :~:. Để tránh các vấn đề về khả năng tương thích với các mảnh phần tử URL hiện có như đã trình bày ở trên, thông số kỹ thuật của Mảnh văn bản sẽ giới thiệu lệnh phân mảnh. Lệnh phân đoạn là một phần của phân đoạn URL được phân tách bằng trình tự mã :~:. Tập lệnh này dành riêng cho hướng dẫn của tác nhân người dùng, chẳng hạn như text= và được xoá khỏi URL trong khi tải để tập lệnh tác giả không thể tương tác trực tiếp với URL đó. Hướng dẫn dành cho tác nhân người dùng còn được gọi là lệnh. Trong trường hợp cụ thể, text= được gọi là lệnh văn bản.
Phát hiện tính năng
Để phát hiện khả năng hỗ trợ, hãy kiểm tra thuộc tính fragmentDirective chỉ có thể đọc trên document. Lệnh phân đoạn là một cơ chế để URL chỉ định các hướng dẫn được chuyển hướng đến trình duyệt chứ không phải tài liệu. Thư viện này nhằm tránh tương tác trực tiếp với tập lệnh tác giả để có thể thêm hướng dẫn cho tác nhân người dùng trong tương lai mà không sợ gây ra các thay đổi có thể gây lỗi cho nội dung hiện có. Một ví dụ tiềm năng về những bổ sung như vậy trong tương lai có thể là gợi ý dịch.
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
Việc phát hiện tính năng chủ yếu dùng cho các trường hợp đường liên kết được tạo một cách linh động (chẳng hạn như do các công cụ tìm kiếm) tạo ra để tránh phân phát đường liên kết của các đoạn văn bản đến những trình duyệt không hỗ trợ đường liên kết đó.
Tạo kiểu đoạn văn bản
Theo mặc định, các trình duyệt sẽ định kiểu cho các mảnh văn bản giống như chúng tạo kiểu mark (thường là màu đen trên vàng, màu hệ thống CSS cho mark). Biểu định kiểu tác nhân người dùng chứa CSS có dạng như sau:
:root::target-text {
color: MarkText;
background: Mark;
}
Như bạn có thể thấy, trình duyệt sẽ hiển thị một bộ chọn giả ::target-text mà bạn có thể dùng để tuỳ chỉnh phần đánh dấu đã áp dụng. Ví dụ: bạn có thể thiết kế các mảnh văn bản thành văn bản màu đen trên nền đỏ. Như thường lệ, hãy nhớ kiểm tra độ tương phản màu để kiểu ghi đè của bạn không gây ra vấn đề về hỗ trợ tiếp cận và đảm bảo phần đánh dấu thực sự nổi bật so với phần còn lại của nội dung.
:root::target-text {
color: black;
background-color: red;
}
Khả năng lấp đầy
Tính năng Mảnh văn bản có thể được điền nhiều mảnh ở một mức độ nào đó. Chúng tôi cung cấp polyfill mà tiện ích này sử dụng nội bộ, cho các trình duyệt không cung cấp tính năng hỗ trợ tích hợp sẵn cho các Mảnh văn bản có chức năng được triển khai trong JavaScript.
Tạo đường liên kết đến Mảnh văn bản có lập trình
polyfill chứa một tệp fragment-generation-utils.js mà bạn có thể nhập và sử dụng để tạo đường liên kết đến Mảnh văn bản. Điều này được nêu trong mã mẫu dưới đây:
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);
}
Thu thập các mảnh văn bản cho mục đích phân tích
Nhiều trang web sử dụng mảnh này để định tuyến, do đó, trình duyệt sẽ tách các Mảnh văn bản để không làm hỏng các trang đó. Nhu cầu được xác nhận để hiển thị đường liên kết Mảnh văn bản đến các trang chẳng hạn như cho mục đích phân tích, nhưng giải pháp đề xuất chưa được triển khai. Để khắc phục vấn đề này, hiện tại, bạn có thể sử dụng mã bên dưới để trích xuất thông tin mong muốn.
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
Bảo mật
Các lệnh mảnh văn bản chỉ được gọi trên các thao tác điều hướng đầy đủ (không phải cùng một trang) là kết quả của việc kích hoạt người dùng.
Ngoài ra, các hoạt động điều hướng bắt nguồn từ một nguồn gốc khác với đích đến sẽ đòi hỏi việc điều hướng diễn ra trong ngữ cảnh noopener, sao cho trang đích được biết là được tách biệt đầy đủ. Các lệnh mảnh văn bản chỉ được áp dụng cho khung chính. Điều này có nghĩa là văn bản sẽ không được tìm kiếm bên trong iframe và hoạt động điều hướng iframe sẽ không gọi một mảnh văn bản.
Quyền riêng tư
Điều quan trọng là việc triển khai thông số kỹ thuật của Mảnh văn bản không bị rò rỉ dù có tìm thấy mảnh văn bản trên một trang hay không. Mặc dù mảnh phần tử hoàn toàn thuộc quyền kiểm soát của tác giả trang gốc, nhưng bất kỳ ai cũng có thể tạo mảnh văn bản. Hãy nhớ lại vì sao trong ví dụ trên của tôi, không có cách nào để liên kết đến tiêu đề Mô-đun ECMAScript trong Trình chạy web, vì <h1> không có id, nhưng làm thế nào mọi người, kể cả tôi, có thể liên kết đến bất kỳ nơi nào bằng cách tạo mảnh văn bản một cách cẩn thận?
Hãy tưởng tượng tôi đã chạy một mạng quảng cáo xấu evil-ads.example.com. Hãy hình dung thêm rằng trong một trong các iframe quảng cáo của mình, tôi đã tự động tạo một iframe nhiều nguồn gốc ẩn thành dating.example.com bằng URL mảnh văn bản dating.example.com#:~:text=Log%20Out sau khi người dùng tương tác với quảng cáo. Nếu thấy thông báo "Đăng xuất", tôi biết rằng nạn nhân hiện đang đăng nhập vào dating.example.com mà tôi có thể sử dụng để lập hồ sơ người dùng. Vì việc triển khai Mảnh văn bản đơn thuần có thể quyết định rằng một kết quả so khớp thành công sẽ dẫn đến sự chuyển đổi tâm điểm, nên trên evil-ads.example.com, tôi có thể theo dõi sự kiện blur và từ đó biết được thời điểm xảy ra kết quả trùng khớp. Trong Chrome, chúng tôi đã triển khai các Mảnh văn bản theo cách mà trường hợp trên không thể xảy ra.
Một cuộc tấn công khác có thể là để khai thác lưu lượng truy cập mạng dựa trên vị trí cuộn. Giả sử tôi có quyền truy cập vào
nhật ký lưu lượng truy cập mạng của nạn nhân, chẳng hạn như quản trị viên mạng nội bộ của công ty. Bây giờ, hãy tưởng tượng là đã tồn tại
một tài liệu dài về nguồn nhân lực Việc cần làm nếu bạn phải chịu đựng... và sau đó là danh sách
các tình trạng như kiệt sức, lo lắng, v.v. Tôi có thể đặt pixel theo dõi bên cạnh từng mục trong
danh sách. Nếu sau đó tôi xác định rằng việc tải tài liệu tạm thời xảy ra với việc tải pixel theo dõi bên cạnh, chẳng hạn như mục lưu lượng truy cập, thì với tư cách là quản trị viên mạng nội bộ, tôi có thể xác định rằng một nhân viên đã nhấp vào liên kết mảnh văn bản với :~:text=burn%20out mà nhân viên có thể đã cho là bảo mật và không ai có thể xem được. Vì ví dụ này phần nào được xây dựng để bắt đầu và vì việc khai thác đòi hỏi phải đáp ứng các điều kiện tiên quyết rất cụ thể, nên nhóm bảo mật của Chrome đã đánh giá rủi ro của việc triển khai chức năng cuộn trên thành phần điều hướng có thể quản lý được.
Các tác nhân người dùng khác có thể quyết định hiển thị thành phần cuộn thủ công trên giao diện người dùng.
Đối với những trang web muốn chọn không sử dụng, Chromium hỗ trợ giá trị tiêu đề Chính sách tài liệu mà họ có thể gửi để tác nhân người dùng sẽ không xử lý URL phân đoạn văn bản.
Document-Policy: force-load-at-top
Tắt đoạn văn bản
Cách dễ nhất để tắt tính năng này là sử dụng một tiện ích có thể chèn tiêu đề phản hồi HTTP, ví dụ: ModHeader (không phải là sản phẩm của Google), để chèn tiêu đề (không phải yêu cầu) như sau:
Document-Policy: force-load-at-top
Một cách khác có hiệu quả cao hơn để chọn không tham gia là sử dụng chế độ cài đặt ScrollToTextFragmentEnabled dành cho doanh nghiệp.
Để thực hiện việc này trên macOS, hãy dán lệnh bên dưới vào dòng lệnh.
defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
Trên Windows, hãy làm theo tài liệu trên trang web hỗ trợ Trợ giúp của Google Chrome Enterprise.
Đoạn văn bản trong công cụ tìm kiếm trên web
Đối với một số nội dung tìm kiếm, công cụ tìm kiếm Google sẽ cung cấp câu trả lời nhanh hoặc bản tóm tắt kèm theo đoạn trích nội dung từ một trang web có liên quan. Những đoạn trích nổi bật này có nhiều khả năng xuất hiện nhất khi nội dung tìm kiếm ở dạng câu hỏi. Khi nhấp vào một đoạn trích nổi bật, người dùng sẽ được đưa thẳng đến văn bản của đoạn trích nổi bật đó trên trang web nguồn. Tính năng này hoạt động nhờ các URL mảnh văn bản được tạo tự động.
Kết luận
URL mảnh văn bản là một tính năng hữu ích để liên kết đến văn bản tuỳ ý trên trang web. Cộng đồng học thuật có thể sử dụng bài viết này để cung cấp đường liên kết trích dẫn hoặc tham khảo có độ chính xác cao. Các công cụ tìm kiếm có thể sử dụng URL này để liên kết sâu đến kết quả văn bản trên các trang. Các trang web mạng xã hội có thể sử dụng tính năng này để cho phép người dùng chia sẻ các đoạn cụ thể của trang web thay vì ảnh chụp màn hình không truy cập được. Tôi hy vọng bạn sẽ bắt đầu sử dụng URL mảnh văn bản và thấy chúng cũng hữu ích như tôi. Hãy nhớ cài đặt tiện ích Liên kết đến mảnh văn bản cho trình duyệt.
Đường liên kết có liên quan
- Bản nháp quy cách
- Xem xét TAG
- Mục nhập Trạng thái Nền tảng Chrome
- Lỗi theo dõi trên Chrome
- Ý định gửi chuỗi
- Luồng WebKit-Dev
- Chuỗi vị trí theo tiêu chuẩn của Mozilla
Xác nhận
Mảnh văn bản do Nick Burris và David Bokan triển khai và chỉ định với sự đóng góp của Grants Wang. Cảm ơn Joe Medley đã đánh giá kỹ lưỡng bài viết này. Hình ảnh chính của Greg Rakozy trên Unsplash.