注意：請勿將本文中提到的技術用于違法行為，因此造成的損失我不承擔任何責任。

簡介

之前在內測群里聊天，我才發(fā)現(xiàn)幾乎沒有人知道如何修改一個網(wǎng)頁中的內容，除了相關領域。可能是因為我已經接觸了前端的一些知識，所以默認很多人都了解。

本文會總結幾種簡單的修改頁面內容的方式。我會用比較簡單的描述，畢竟這個知識點對于大多數(shù)前端是必備的，懂的自然懂。

一些簡單的知識點

什么是網(wǎng)頁？

網(wǎng)頁是你通過瀏覽器或應用內訪問到的一個界面，是由若干代碼構成的。這里的代碼并不復雜，如果你對編程語言有一定的了解，你可以認為這個頁面中的代碼是標識型的，而不是類似C語言中的邏輯。我們使用若干個元素標簽標記頁面中的內容。

修改網(wǎng)頁內容會修改實際的內容嗎？

你能看到的絕大多數(shù)頁面都是已經被加載完畢的，換句話說，在使用過程中，它是一個相對的靜態(tài)頁面。靜態(tài)頁面中的內容雖然是固定的，但是其絕大部分數(shù)據(jù)的來源依然是服務器傳遞過來的數(shù)據(jù)。這個技術不會也不能修改服務器動態(tài)傳遞的數(shù)據(jù)，也不能修改服務器中的數(shù)據(jù)，更不能將修改后的數(shù)據(jù)傳回服務器（非用戶輸入的情況下），只能修改已經被加載完畢的靜態(tài)數(shù)據(jù)。

所以，從技術上來說，它是安全的，但是不要將這項技術用于違法用途。

開始

準備

• 一臺電腦（任意操作系統(tǒng)）
• 基于Chrome內核的瀏覽器

這里需要解釋一下，Chrome是谷歌旗下的一款瀏覽器，其內核為開源，很多瀏覽器使用的也是Chrome內核，例如Edge。

如果你的瀏覽器不是基于Chrome內核，部分操作可能會與本文不同，但是思路是相同的。

如果你不清楚你的瀏覽器是什么內核，可以閱讀其官網(wǎng)的內容，或者是安裝Chrome。

開啟調試

在瀏覽器中，摁下 F12 鍵。

我們的界面右側會出現(xiàn)一個額外的區(qū)域，顯示著復雜的代碼，這就是我們的調試工具。

在不同的瀏覽器中，調試工具可能會有不同的名字，甚至是有不同的開啟方法。

方法1 元素檢查

元素檢查是開發(fā)時很好用的工具，便于定位元素及修改。

如圖，選擇左上角的按鈕，

當我們再次移動鼠標時，界面會發(fā)生一些變化。

此時我們的鼠標會自動顯示所在區(qū)域的元素，通過單擊來選擇元素。

在單擊后，會自動退出元素檢查，同時會自動定位右邊的代碼。

雙擊“43.78”，即可對這個數(shù)字進行修改，通過回車確定，

與此同時，頁面內的元素會發(fā)生相同的變化。

通過這種方式，可以修改任意元素的文本內容。

如果你了解的更多，其實可以通過這種方式完全修改這個頁面。

方法2 Javascript調試

這一次，我們要選擇控制臺選項卡。

輸入命令：

document.body.contentEditable="true"

按下回車以確定，

此時我們已經進入了類似的編輯模式。

如果我沒記錯的話，這段代碼有一個小問題，就是會導致頁面重復出現(xiàn)波浪線，即拼寫錯誤，修復的話需要在瀏覽器設置內關掉文本檢查的功能。

當然，如果沒有發(fā)生，那就當我沒說過。

輸入命令：

document.designMode='on'

可以實現(xiàn)相同的效果，不再重復了。

用途

用途，一定是非常廣泛了。正如我在開始提到的，這本身是前端開發(fā)必不可少的一個工具，同樣的，也可以做很多事，尤其是一些惡趣味。

你們月入過百萬的進來挨打

最后表演一個絕活，隨心所欲地修改支付寶的余額：

最后

不要嘗試做違法的事。

總結

以上是生活随笔為你收集整理的网页中嵌套网页flush_如何修改网页中的内容？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。