注意：請(qǐng)勿將本文中提到的技術(shù)用于違法行為，因此造成的損失我不承擔(dān)任何責(zé)任。

簡(jiǎn)介

之前在內(nèi)測(cè)群里聊天，我才發(fā)現(xiàn)幾乎沒(méi)有人知道如何修改一個(gè)網(wǎng)頁(yè)中的內(nèi)容，除了相關(guān)領(lǐng)域。可能是因?yàn)槲乙呀?jīng)接觸了前端的一些知識(shí)，所以默認(rèn)很多人都了解。

本文會(huì)總結(jié)幾種簡(jiǎn)單的修改頁(yè)面內(nèi)容的方式。我會(huì)用比較簡(jiǎn)單的描述，畢竟這個(gè)知識(shí)點(diǎn)對(duì)于大多數(shù)前端是必備的，懂的自然懂。

一些簡(jiǎn)單的知識(shí)點(diǎn)

什么是網(wǎng)頁(yè)？

網(wǎng)頁(yè)是你通過(guò)瀏覽器或應(yīng)用內(nèi)訪問(wèn)到的一個(gè)界面，是由若干代碼構(gòu)成的。這里的代碼并不復(fù)雜，如果你對(duì)編程語(yǔ)言有一定的了解，你可以認(rèn)為這個(gè)頁(yè)面中的代碼是標(biāo)識(shí)型的，而不是類似C語(yǔ)言中的邏輯。我們使用若干個(gè)元素標(biāo)簽標(biāo)記頁(yè)面中的內(nèi)容。

修改網(wǎng)頁(yè)內(nèi)容會(huì)修改實(shí)際的內(nèi)容嗎？

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

所以，從技術(shù)上來(lái)說(shuō)，它是安全的，但是不要將這項(xiàng)技術(shù)用于違法用途。

開始

準(zhǔn)備

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

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

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

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

開啟調(diào)試

在瀏覽器中，摁下 F12 鍵。

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

在不同的瀏覽器中，調(diào)試工具可能會(huì)有不同的名字，甚至是有不同的開啟方法。

方法1 元素檢查

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

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

當(dāng)我們?cè)俅我苿?dòng)鼠標(biāo)時(shí)，界面會(huì)發(fā)生一些變化。

此時(shí)我們的鼠標(biāo)會(huì)自動(dòng)顯示所在區(qū)域的元素，通過(guò)單擊來(lái)選擇元素。

在單擊后，會(huì)自動(dòng)退出元素檢查，同時(shí)會(huì)自動(dòng)定位右邊的代碼。

雙擊“43.78”，即可對(duì)這個(gè)數(shù)字進(jìn)行修改，通過(guò)回車確定，

與此同時(shí)，頁(yè)面內(nèi)的元素會(huì)發(fā)生相同的變化。

通過(guò)這種方式，可以修改任意元素的文本內(nèi)容。

如果你了解的更多，其實(shí)可以通過(guò)這種方式完全修改這個(gè)頁(yè)面。

方法2 Javascript調(diào)試

這一次，我們要選擇控制臺(tái)選項(xiàng)卡。

輸入命令：

document.body.contentEditable="true"

按下回車以確定，

此時(shí)我們已經(jīng)進(jìn)入了類似的編輯模式。

如果我沒(méi)記錯(cuò)的話，這段代碼有一個(gè)小問(wèn)題，就是會(huì)導(dǎo)致頁(yè)面重復(fù)出現(xiàn)波浪線，即拼寫錯(cuò)誤，修復(fù)的話需要在瀏覽器設(shè)置內(nèi)關(guān)掉文本檢查的功能。

當(dāng)然，如果沒(méi)有發(fā)生，那就當(dāng)我沒(méi)說(shuō)過(guò)。

輸入命令：

document.designMode='on'

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

用途

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

你們?cè)氯脒^(guò)百萬(wàn)的進(jìn)來(lái)挨打

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

最后

不要嘗試做違法的事。

總結(jié)

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

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