Ta strona została przetłumaczona przez Cloud Translation API.

Fragmenty tekstu pogrubione linki, do których nikt wcześniej nie linkował

Fragmenty tekstu umożliwiają podanie fragmentu tekstu we fragmencie adresu URL. Po przejściu do adresu URL z takim fragmentem tekstu przeglądarka może wyróżnić lub zwrócić na to uwagę użytkownika.

Thomas Steiner

Identyfikatory fragmentów

Chrome 80 okazał się premierą. Zawierała ona wiele wyczekiwanych funkcji, Moduły ECMAScript w środowiskach Web Worker, łączenie nullish, opcjonalne połączenie w sieci itp. Premiera odbyła się jak zwykle ogłoszono w post na blogu w Blog Chromium. Fragment posta na blogu znajdziesz na zrzucie ekranu poniżej.

Post na blogu Chromium z czerwonymi polami wokół elementów z atrybutem `id`.

Zastanawiasz się pewnie, co oznaczają wszystkie czerwone pola. Są one wynikiem zastosowania ten fragment kodu w Narzędziach deweloperskich. Podświetla się wszystkie elementy, które mają atrybut id.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

Mogę umieścić precyzyjny link do dowolnego elementu podświetlonego na czerwono, dzięki czemu identyfikator fragmentu który potem używam w haszcie adres URL strony. Zakładając, że chcę dodać precyzyjny link do sekcji Przekaż nam swoją opinię na Fora usług w Mogę też ręcznie utworzyć URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 Jak widać w panelu Elementy w Narzędziach dla programistów, element, którego dotyczy skarga, ma atrybut id o wartości HTML1.

Narzędzia deweloperskie pokazujące `id` elementu.

Jeśli przeanalizuję ten URL za pomocą konstruktora URL() JavaScriptu, różne komponenty zostaną ujawnione. Zwróć uwagę na właściwość hash o wartości #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: ""
}
*/

Jednak to, że trzeba było otworzyć Narzędzia dla programistów, aby znaleźć id elementu, mówi wiele o tym. na temat prawdopodobieństwa, że ta konkretna sekcja strony miała być powiązana przez autora do posta na blogu.

Co zrobić, jeśli chcę połączyć z elementem, który nie ma konta id? Załóżmy, że chcę utworzyć link do modułów ECMAScript w nagłówku Web Workers. Jak widać na zrzucie ekranu poniżej, <h1>, którego dotyczy problem, nie ma atrybut id, co oznacza, że nie ma możliwości połączenia się z tym nagłówkiem. Ten problem Fragmenty tekstu zostaną rozwiązane.

Narzędzia deweloperskie z nagłówkiem bez `id`.

Fragmenty tekstu

Propozycja Fragmenty tekstu obsługuje przez podanie fragmentu tekstu w haszach adresu URL. Przy przejściu do adresu URL z takim fragmentem tekstu parametr klient użytkownika może je wyróżnić lub zwrócić na niego uwagę.

Zgodność z przeglądarką

Obsługa przeglądarek

Źródło

Ze względów bezpieczeństwa ta funkcja wymaga otwierania linków w noopener – kontekst. Dlatego pamiętaj o dodaniu atrybutów rel="noopener" w: <a> znacznik kotwicy lub dodaj noopener na Window.open() lista funkcji okien.

`start`

W najprostszej formie składnia fragmentów tekstu wygląda tak: symbol skrótu #, po którym następuje znak :~:text= i start, które reprezentują zakodowane za pomocą procentów tekst, do którego ma być link.

#:~:text=start

Załóżmy na przykład, że chcę utworzyć link do nagłówka ECMAScript Modules in Web Workers w sekcji post na blogu zapowiadający funkcje w Chrome 80 w tym przypadku URL będzie wyglądać tak:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

Fragment tekstu jest wyróżniony w ten sposób. Jeśli klikniesz link w obsługiwanej przeglądarce, takiej jak Chrome, fragment tekstu zostanie podświetlony, wyświetli się na ekranie:

Fragment tekstu został przewinięty do widoku i zaznaczony.

`start` i `end`

A jeśli chcę utworzyć link do całej sekcji o nazwie ECMAScript Modules in Web Workers, a nie do tylko jej nagłówek? Kodowanie procentowe całego tekstu sekcji spowodowałoby utworzenie wynikowego adresu URL niepraktycznie długi.

Na szczęście istnieje lepszy sposób. Zamiast całego tekstu mogę umieścić wybrany tekst w ramce Składnia start,end. Dlatego na początku określam kilka słów zakodowanych za pomocą procentów wybranego tekstu i kilku słów zakodowanych za pomocą procentów na końcu, rozdzielone przecinkiem ,.

Wygląda to tak:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

W przypadku pozycji start mamy ECMAScript%20Modules%20in%20Web%20Workers, po którym znajduje się przecinek , przez ES%20Modules%20in%20Web%20Workers. jako end. Gdy klikniesz odpowiednią przeglądarkę, tak jak Chrome, cała sekcja jest podświetlona i przewinięta do widoku:

Być może zastanawiasz się teraz, co wybieram start i end. Właściwie to nieco krótszy URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. z dwoma słowami po każdej stronie też zadziałałoby. Porównaj dane start i end z poprzednich wartości.

Jeśli pójdziemy o krok dalej i użyję tylko jednego słowa zarówno w parametrach start, jak i end, że jestem w kłopotach. Adres URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. jest teraz jeszcze krótszy, ale zaznaczony fragment tekstu nie jest już pożądanym fragmentem. wyróżnianie jest przystankowe na pierwszym wystąpieniu słowa Workers.; jest to poprawna odpowiedź, ale nie to, co ja który chcemy podkreślić. Problem polega na tym, że żądana sekcja nie jest jednoznacznie identyfikowana przez bieżące jednowyrazowe wartości start i end:

Niezamierzony fragment tekstu został przewinięty i podświetlony.

`prefix-` i `-suffix`

Użycie wystarczająco długich wartości dla atrybutów start i end to jedno z rozwiązań pozwalających uzyskać unikalny link. W niektórych sytuacjach nie jest to jednak możliwe. Na marginesie: dlaczego zdecydowałem się Może to być post na blogu dotyczący wersji Chrome 80. Odpowiedź jest taka, że w tej wersji Fragmenty tekstu zostały wprowadzone:

Tekst posta na blogu: fragmenty adresów URL. Użytkownicy i autorzy mogą teraz tworzyć linki do określonej części strony za pomocą fragmentów tekstu dostępnych w adresie URL. Po załadowaniu strony przeglądarka podświetla tekst i przewinie go, aby był widoczny. Na przykład poniższy adres URL wczytuje stronę wiki dla hasła „kot” i przewinie do treści wymienionej w parametrze „text”. — Fragment posta na blogu z ogłoszeniem na temat fragmentów tekstu

Zwróć uwagę, jak na zrzucie ekranu nad słowem „tekst” pojawia się cztery razy. Czwarte wystąpienie zapisany zieloną czcionką kodu. Aby dodać link do tego konkretnego słowa, użyj ustawienia start do: text. Ponieważ słowo „tekst” że tylko jedno słowo, nie może end. Co teraz? Adres URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text wskazuje dopasowanie do pierwszego wystąpienia słowa „Text” są już w nagłówku:

Dopasowanie fragmentu tekstu przy pierwszym wystąpieniu ciągu „Text”.

Na szczęście jest rozwiązanie. W takich przypadkach mogę określić prefix- i -suffix. słowo przed zieloną czcionką kodu „text” to „the”, a kolejne słowo to „parametr”. Żadna z tych kategorii pozostałe 3 wystąpienia słowa „tekst” ma takie same otaczające go słowa. Wyposażony w to wszystko mogę poprawić poprzedni URL i dodać prefix- oraz -suffix. Jak tam muszą być zakodowane przy użyciu procentów i mogą zawierać więcej niż jedno słowo. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. Aby parser mógł wyraźnie identyfikować identyfikatory prefix- i -suffix, muszą one być rozdzielone od start oraz opcjonalnego end z myślnikiem -.

Fragment tekstu dopasowania do odpowiedniego wystąpienia ciągu „text”.

Pełna składnia

Pełną składnię fragmentów tekstu znajdziesz poniżej. (Nawiasy kwadratowe oznaczają parametr opcjonalny). Wartości wszystkich parametrów muszą być zakodowane przy użyciu procentów. Jest to szczególnie ważne w przypadku kreski Znaki -, ampersand & oraz przecinki ,, dlatego nie są interpretowane jako część tekstu składni dyrektywy.

#:~:text=[prefix-,]start[,end][,-suffix]

Wartości prefix-, start, end i -suffix pozwalają dopasować tylko tekst w jednym element na poziomie bloku, ale pełne zakresy start,end mogą obejmować wiele bloków. Przykład: :~:text=The quick,lazy dog nie będzie pasować do poniższego przykładu, ponieważ początek tekst „Szybko” nie pojawia się w pojedynczym, niezakłóconym elemencie na poziomie bloku:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

W tym przykładzie odpowiada ona jednak:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

Tworzenie adresów URL z fragmentami tekstu z rozszerzeniem przeglądarki

Ręczne tworzenie adresów URL z fragmentami tekstu jest pracochłonne, zwłaszcza jeśli chodzi o to, aby były i niepowtarzalna. Jeśli naprawdę chcesz, w specyfikacji znajdziesz wskazówki i dokładne instrukcję generowania adresów URL z fragmentami tekstu. Oferujemy rozszerzenie do przeglądarki typu open source o nazwie Link do fragmentu tekstu, który umożliwia do dowolnego tekstu, zaznaczając go i klikając „Kopiuj link do zaznaczonego tekstu”. w kontekście . To rozszerzenie jest dostępne w następujących przeglądarkach:

Link do fragmentu tekstu z rozszerzenia przeglądarki.

Wiele fragmentów tekstu w jednym adresie URL

Pamiętaj, że w jednym adresie URL może występować wiele fragmentów tekstu. Konkretne fragmenty tekstu muszą być są oddzielone znakiem „&”. Oto przykładowy link z 3 fragmentami tekstu: 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

3 fragmenty tekstu pod jednym adresem URL.

Łączenie elementów i fragmentów tekstu

Fragmenty elementów tradycyjnych można łączyć z fragmentami tekstu. Całkowicie dobrze jest mieć oba w tym samym adresie URL, by na przykład uzyskać znaczący tekst zastępczy w sytuacji, gdy oryginalny tekst na stronie znajduje się na stronie. zmienia się w taki sposób, że fragment tekstu nie jest już dopasowany. Adres URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. Link do Prześlij nam opinię w Sekcja Fora usług zawiera zarówno fragment elementu (HTML1), jak i fragment tekstu (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Tworzenie linków z fragmentami elementów i tekstu.

Dyrektywa dotycząca fragmentu

W składni, której jeszcze nie wyjaśniłem, jest 1 element: dyrektywa fragment :~:. Aby unikać problemów ze zgodnością z istniejącymi fragmentami elementów URL, jak pokazano powyżej, Specyfikacja fragmentów tekstu wprowadza fragment . Dyrektywa fragment to część fragmentu adresu URL rozdzielonym sekwencją kodu :~: Jest zarezerwowany dla instrukcji dotyczących klienta użytkownika, takich jak text=, i jest usuwany z adresu URL podczas wczytywania, by skrypty autorskie nie mogły z nim bezpośrednio wchodzić w interakcję. Instrukcje dotyczące klienta użytkownika: zwanych dyrektywami. W konkretnym przypadku element text= jest więc nazywany dyrektywą tekstową.

Wykrywanie cech

Aby sprawdzić, czy usługa jest obsługiwana, przetestuj w document właściwość fragmentDirective tylko do odczytu. Fragment to mechanizm, który umożliwia adresom URL określanie instrukcji kierowanych do przeglądarki, a nie dokument. Ma to na celu unikanie bezpośredniej interakcji ze skryptem autora, aby przyszły klient użytkownika można dodawać instrukcje bez obawy o wprowadzenie zmian powodujących niezgodność w istniejących treściach. Jeden potencjalnym przykładem takich dodatków mogą być wskazówki dotyczące tłumaczenia.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

Uwaga: od Chrome 80 do Chrome 85 właściwość fragmentDirective została zdefiniowana w systemie Location.prototype. Szczegółowe informacje o tej zmianie znajdziesz na stronie WICG/scroll-to-text-fragment#130.

Wykrywanie cech dotyczy głównie przypadków, gdy linki są generowane dynamicznie (na przykład przez wyszukiwarek), aby uniknąć wyświetlania linków z fragmentami tekstu do przeglądarek, które ich nie obsługują.

Ustawianie stylu fragmentów tekstu

Domyślnie przeglądarki stylizują fragmenty tekstu w taki sam sposób, w jaki korzystają z nich mark (zwykle czarny na żółtym, kolory systemowe CSS dla domeny mark). Arkusz stylów klienta użytkownika zawiera kod CSS podobny do tego:

:root::target-text {
  color: MarkText;
  background: Mark;
}

Jak widać, przeglądarka udostępnia pseudoselektor ::target-text, za pomocą których możesz: dostosować zastosowane wyróżnienie. Możesz na przykład zaprojektować fragmenty tekstu tak, aby były czarne tekst na czerwonym tle. Jak zawsze, sprawdź kontrast kolorów aby styl zastępowania nie powodował problemów z ułatwieniami dostępu, i upewnij się, odróżniać się wizualnie od reszty treści.

:root::target-text {
  color: black;
  background-color: red;
}

Możliwość wielokrotnego wypełniania

Funkcja Fragmenty tekstu może być do pewnego stopnia wypełniana politycznie. Zapewniamy polyfill jest używany wewnętrznie przez rozszerzenie dla przeglądarek, które nie używają zapewniają wbudowaną obsługę fragmentów tekstu, w przypadku których ta funkcja jest wdrożona w języku JavaScript.

Generowanie linków do automatycznych fragmentów tekstu

Element polyfill zawiera plik fragment-generation-utils.js, które możesz zaimportować i wykorzystać do generowania linków z fragmentami tekstu. To jest w poniższym przykładzie kodu:

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);
}

Uzyskiwanie fragmentów tekstu do celów analitycznych

Wiele witryn używa tych fragmentów do routingu, dlatego przeglądarki usuwają fragmenty tekstu aby nie zepsuć tych stron. Jest uwzględnione potrzeby aby udostępniać linki do fragmentów tekstu do stron, np. do celów analitycznych, ale proponowane rozwiązanie nie zostało jeszcze wdrożone. Aby obejść ten problem, możesz użyć poniższego kodu do wyodrębnienia potrzebnych informacji.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

Bezpieczeństwo

Dyrektywy dotyczące fragmentów tekstu są wywoływane tylko w przypadku pełnych nawigacji (nie na tej samej stronie), które są wynikiem a aktywacji użytkowników. Ponadto w przypadku nawigacji z innego miejsca wylotu niż miejsce docelowe będzie wymagane podanie atrybutu nawigacji w klimacie noopener, taki jak że strona docelowa jest wystarczająco odizolowana. Dyrektywy dotyczące fragmentów tekstu zawierają tylko zastosowano do ramki głównej. Oznacza to, że tekst nie będzie przeszukiwany w elementach iframe, a nawigacja nie wywołuje fragmentu tekstu.

Prywatność

Ważne jest, aby implementacje specyfikacji fragmentów tekstu nie ujawniały, czy tekst fragment został znaleziony na stronie, czy nie. Chociaż fragmenty elementów są w pełni kontrolowane przez tag fragmenty tekstu mogą być tworzone przez każdego. Zapamiętaj jak w przykładzie powyżej nie można było utworzyć linku do nagłówka ECMAScript Modules in Web Workers, ponieważ <h1> nie ma id, ale jak każdy, m.in. ja, może dostać link do dowolnego miejsca, starannie tworząc fragment tekstu?

Wyobraź sobie, że prowadziłem(-am) złą sieć reklamową evil-ads.example.com. Wyobraź sobie też, że w jednej z moich reklam Elementy iframe Ukryłem(-am) ukryty element iframe z innego źródła w elemencie dating.example.com za pomocą tekstu URL fragmentu dating.example.com#:~:text=Log%20Out gdy użytkownik wejdzie w interakcję z reklamą. Jeśli pojawia się komunikat „Wyloguj się”, Wiem, że ofiara została zalogowała się na konto dating.example.com, które mogę wykorzystać do profilowania użytkowników. Ponieważ tekst naiwny Implementacja fragmentów kodu może określić, że pomyślne dopasowanie powinno spowodować ustawienie ostrości, evil-ads.example.com Dzięki temu mogę wykrywać zdarzenie blur i w ten sposób dowiedzieć się, kiedy wystąpiło dopasowanie. W Chrome, wdrożyliśmy fragmenty tekstu w taki sposób, że nie będzie to możliwe w opisany powyżej scenariusz.

Innym atakiem może być wykorzystanie ruchu sieciowego na podstawie pozycji przewijania. Załóżmy, że mam dostęp do dzienników ruchu sieciowego mojej ofiary, tak jak w przypadku administratora firmowego intranetu. Wyobraź sobie, że sporządzony długim dokumentem z działu kadr Co zrobić, gdy cierpisz od..., a następnie takich jak wypalenie zawodowe, niepokój itp. Możesz umieścić piksel śledzący przy każdym elemencie z listy. Jeśli następnie ustalę, że wczytywanie dokumentu odbywa się równolegle z wczytywaniem śledzący obok elementu wypalenia, mogę, jako administrator intranetu, określić, pracownik kliknął link z fragmentem tekstu z :~:text=burn%20out, który pracownik mogą przyjąć, że są poufne i nie są dla nikogo widoczne. Ten przykład jest trochę Wykorzystano ją, a ponieważ jej wykorzystanie wymaga spełnienia wyraźnych warunków wstępnych, zespół ds. zabezpieczeń Chrome ocenił ryzyko wdrożenia nawigacji przewijanej jako łatwe do zarządzania. Inne klienty użytkownika mogą zamiast tego wyświetlać element interfejsu ręcznego przewijania.

Na stronach, które chcą zrezygnować, Chromium obsługuje Zasady dotyczące dokumentu wartość nagłówka, którą klient może wysyłać, żeby klienty użytkownika nie przetwarzały adresów URL fragmentów tekstu.

Document-Policy: force-load-at-top

Wyłączanie fragmentów tekstu

Najłatwiejszym sposobem wyłączenia tej funkcji jest użycie rozszerzenia, które może wstrzykiwać odpowiedź HTTP nagłówki, na przykład ModHeader (nie usługi Google), aby wstawić nagłówek odpowiedzi (nie żądanie):

Document-Policy: force-load-at-top

Innym, bardziej przydatnym sposobem rezygnacji jest użycie ustawień dla firm ScrollToTextFragmentEnabled Aby to zrobić w systemie macOS, wklej poniższe polecenie w terminalu.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

W systemie Windows postępuj zgodnie z dokumentacją na stronie pomoc na stronie Centrum pomocy Google Chrome Enterprise. witrynie.

Fragmenty tekstu w wyszukiwarce Google

W przypadku niektórych wyszukiwań wyszukiwarka Google podaje szybką odpowiedź lub podsumowanie wraz z treścią, fragment z odpowiedniej witryny. Te fragmenty z odpowiedzią najczęściej wyświetlają się podczas wyszukiwania. ma formę pytania. Po kliknięciu fragmentu z odpowiedzią użytkownik przechodzi bezpośrednio do tego fragmentu fragment tekstu na źródłowej stronie internetowej. Działa to dzięki automatycznie tworzonym adresom URL z fragmentami tekstu.

Strona wyników wyszukiwarki Google z fragmentem z odpowiedzią. Pasek stanu pokazuje adres URL fragmentów tekstu.

Gdy przejdziesz dalej, zobaczysz odpowiednią sekcję strony.

Podsumowanie

URL z fragmentami tekstu to zaawansowana funkcja tworzenia linków do dowolnego tekstu na stronach internetowych. Naukowe społeczność może korzystać z niej, aby podać bardzo dokładne cytowania lub linki referencyjne. Wyszukiwarki mogą używać aby umieścić w witrynie precyzyjny link do wyników wyszukiwania na stronach. Sieci społecznościowe mogą go używać, aby umożliwiać użytkownikom udostępnianie na określonych fragmentach strony internetowej zamiast niedostępnych zrzutów ekranu. Mam nadzieję, że zaczniesz używając adresów URL z fragmentami tekstu, i uważam je za przydatne jak ja. Pamiętaj, aby zainstalować Link do przeglądarki z fragmentami tekstu .

Powiązane artykuły

Podziękowania

Fragmenty tekstu zostały zaimplementowane i określone przez Micka Burrisa i David Bokan, w tym wykonawcy: Przyznaj Wang. Dziękujemy Joe Medley za dokładne omówienie tego artykułu. Baner powitalny autorstwa Grega Rakozy'ego, dostępny w Odchylenie.