search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[JS] Jak dodać dodatkowy tekst do tekstu kopiowanego ze strony?

[JS] Jak dodać dodatkowy tekst do tekstu kopiowanego ze strony?

Jak często zdarza ci się kopiować tekst na stronie metodą "kopiuj-wklej"? Domyślam się, że od czasu do czasu każdemu się to zdarza. A czy zastanawiałeś/aś się czy można dodać jakiś dodatkowy tekst do tak skopiowanego tekstu? Jasne, że tak.

Implementacja mechanizmu w Javascript

Akcja aktualizacji tekstu będzie miała miejsce w momencie zaznaczania tekstu i uruchumienia akcji kopiowania $.on('copy', fn);. Kod który zmienia zawartość skopiowanego tekstu wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$('body').on('copy', function (e) {
  // jeśli strona jest otwarta w IE8 lub starszej przeglądarce,
  // nie uruchamiaj dalszego kodu. Przeglądarka nie wyrzuci błędów
  if (typeof window.getSelection === undefined) {
    return;
  }
 
  // pobierz zaznaczony tekst
  var selection = window.getSelection();
 
  // jeśli zaznaczony tekst jest krótszy niż 30 znaków,
  // to nie uruchamiamy dalszej części kodu
  if (('' + selection).length < 30) {
    return;
  }
 
  var body      = $('body');
  var container = $('<div>');
 
  // dodajemy jakiekolwiek style,
  // tutaj ukrywamy widoczność kontenera ze skopiowanym tekstem
  container.css({
    'position'  : 'absolute',
    'opacity'   : '0',
    'z-index'   : '0'
  });
  // wstawiamy zaznaczony do kontenera
  container.append(selection.getRangeAt(0).cloneContents());
  // dodajemy kontener z tekstem do przeglądarki
  body.append(container);
 
  // aktualizujemy zawartość skopiowanego tekstu o nasz tekst
  // zakładamy że skopiowany tekst znajdzie się na innej stronie
  // stąd te tagi HTML
  container.append(
    '<p>Więcej informacji znajdziesz na: ' +
    '<a href="https://blog.piotrnalepa.pl/2014/07/28/js-jak-dodac-dodatkowy-tekst-do-tekstu-kopiowanego-ze-strony/">' + document.location.href + '</a> ' +
    '&copy; Blog Webmasterski - Piotr Nalepa</p>'
  );
 
  selection.selectAllChildren(container[0]);
  // na koniec usuwamy kontener z nową zawartością skopiowanego tekstu
  window.setTimeout(function () {
    body.remove(container);
  }, 200);
});

Mechanizm działania jest dość prosty. Korzystamy z interfejsu Selection, który pozwala nam na manipulację zaznaczonym, skopiowanym tekstem.
Na początku, sprawdzamy czy przeglądarka wspiera funkcjonalność. Następnie sprawdzamy długość tekstu i jeśli ma wymaganą minimalną długość, to tworzymy nowy pusty <div/> do którego wklejamy skopiowany tekst. Następnie, do nowoutworzonego elementu <div/> doklejamy pożądany przez nas tekst i odświeżamy zawartość schowka ze skopiowanym tekstem. Na koniec, usuwamy niepotrzebny <div/> z naszego kodu.

Podsumowanie

Jestem w stanie sobie wyobrazić wykorzystanie tego skryptu na wielu stronach bogatych w treści. Szczególnie na stronach przydatnych uczniom szkół lub na stronach, które chcą przechwytywać dane użytkowników. Może to być pożyteczne narzędzie, ale jeśli webmaster będzie miał złe zamiary to może się to obrócić przeciwko użytkownikowi danej strony.

Należy wspomnieć, że przykład nie działa w Internet Explorer 8 i niżej, ale kto by się tymi przeglądarkami przejmował?

źródło

  • Mówiłeś o psikusie… nie spodziewałem się czegoś aż tak wrednego 😉 Coś takiego, źle zastosowane, doprowadza mnie do białej gorączki (forum, kopiuję kod i dokleja mi się do niego jakiś tekst… to samo forum, kopiuję część wypowiedzi, żeby zacytować, bo oczywiście natywnego mechanizmu brak – zaś coś dokleja :/). Cieszę się, że DOM może tak dużo, ale czasami to aż za dużo.

    BTW $(‚body’) w handlerze zdarzeń dla body raczej jest mniej wydajne niż $(this) 😉

  • Przyznaję się, moje przeoczenie odnośnie referencji do body. Skupiałem się na wpisie i nie do końca przejrzałem cały kod.

  • Szczerze, taki skrypt na portalach typy gazeta.pl mnie denerwuje. I szczerze, chętnie bym widział rozwiązanie, jak jaki skrypt zidentyfikować i go zablokować.

  • W takich sytuacjach, jeśli nie jesteś twórcą strony to pozostaje zablokowanie wykonywania kodu JS.