阻止頁面文字複製＆頁面彈窗方案

阻止頁面文字複製

我們在瀏覽網頁的時候，不難遇到這麼一個事情：那就是網頁的文字無法複製。也許有時候大家會感覺是自己的瀏覽器崩掉了，或者是死機了，然並沒。

這其實只不過是網站開發者做了不允許複製的處理而已，是不是顯得很牛逼？

其實實現的代碼很簡單，在多數瀏覽器中，我們只需要CSS就能實現…

來看看改屬性的兼容性（大部分瀏覽器是都兼容的）：

兼容性

但業務場景有時可能不得不對面耨寫 low 貨的瀏覽器，比如IE6-IE9，IE6-IE9還沒有相關的CSS屬性，我們必須用到第二種方式來解決，那就是用js來搞定

IE6-IE9 需要用上面的js才能實現，引入的時候我們需要做一個瀏覽器版本的判斷，是 IE6－IE9 這幾個瀏覽器才引入上面這一段js，其他的無需引入，因為用css就搞定了。

頁面彈窗方案

網上也有很多彈窗庫可以使用，但是對於小項目，完全可以手寫一份，彈窗具體也就幾個需求：

點擊按鈕彈窗

頁面不可滾動

點擊空白區域彈窗隱藏

實現代碼：

要點

1、利用固定定位fixed

2、在蘋果手機上的QQ瀏覽器UC瀏覽器都點擊 body、document、window 無效。網上搜了一遍找到的解決方案：

3、移動端點擊空白區域會閃一下藍色，解決方案點擊色值改成透明：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！