网页中嵌套网页flush_如何修改网页中的内容?
注意:請勿將本文中提到的技術用于違法行為,因此造成的損失我不承擔任何責任。
簡介
之前在內測群里聊天,我才發(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_如何修改网页中的内容?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: echarts雷达图线的样式_echar
- 下一篇: lisp修改界址线属性_如何获取界址线的