如何禁止網頁複製貼上?我學fei了

Luson 發表於 2021-09-13

對於禁止網頁複製貼上,也許你並不陌生。一些網頁是直接禁止複製貼上;一些網頁,則是要求登陸後才可複製貼上;還有一些網站,複製貼上時會帶上網站的相關來源標識資訊。

  • 如何禁止網頁複製貼上

    const html = document.querySelector('html');
    html.oncopy = () => {
    alert('你復想制我呀');
    return false;
    };
    html.onpaste = () => false;
  • 在複製時做些別的操作,比如跳轉登陸頁面

    const html = document.querySelector('html');
    html.oncopy = (e) => {
    console.log(e);
    // 比如指向百度或者登陸頁
    // window.location.href='http://www.baidu.com';
    };
    html.onpaste = (e) => {
    console.log(e);
    };
  • 如何使用 js 設定/獲取剪貼簿內容

    //設定剪下板內容
    document.addEventListener('copy', () => {
    const clipboardData =
    event.clipboardData || event.originalEvent?.clipboardData;
    clipboardData?.setData('text/plain', '不管複製什麼,都是我!');
    event.preventDefault();
    });
    //獲取剪下板的內容
    document.addEventListener('paste', () => {
    const clipboardData =
    event.clipboardData || event.originalEvent?.clipboardData;
    const text = clipboardData?.getData('text');
    console.log(text);
    event.preventDefault();
    });

有什麼用

  • 對於註冊輸入密碼等需要輸入兩次相同內容的場景,應該是需要禁止貼上的,這時候就可以禁止對應輸入框的複製貼上動作。
  • 登陸才能複製。很多網站上的頁面內容是不允許複製的,這樣可以防止使用者或者程式惡意的去抓取頁面資料
本作品採用《CC 協議》,轉載必須註明作者和本文連結