{首页主词},&

引言

在我們日常工作中，可能會遇到截圖頁面的場景，有時頁面有些內容不符合要求，我們可能需要進行一些數(shù)值或內容的修改。如果你會PS，修改內容難度不高，如果你是前端，打開控制臺也能通過修改dom的方式進行簡單的文字修改。

今天，我就來分享一個冷門又實用的前端技巧 —— 只需一行 JavaScript 代碼，讓任何網(wǎng)頁瞬間變成可編輯的！先看看效果：

甚至，還可以插入圖片等媒體內容

如何實現(xiàn)

很難想象，這么炫酷的功能，居然只需要在控制臺輸入一條指令：


document.designMode = "on";

打開瀏覽器控制臺（F12），復制粘貼這行代碼，回車即可。

如果你想關閉此功能，輸入document.designMode = "off"即可。

Document：designMode 屬性

MDN是這樣介紹的：

document.designMode 控制整個文檔是否可編輯。有效值為 "on" 和 "off"。根據(jù)規(guī)范，該屬性默認為 "off"。Firefox 遵循這一標準。早期版本的 Chrome 和 IE 默認為 "inherit"。從 Chrome 43 開始，默認為 "off" 并不再支持 "inherit"。在 IE6-10 中，該值為大寫。

兼容性方面，基本上所有瀏覽器都是支持的。

借助次API，我們也能實現(xiàn)Iframe嵌套頁面的編輯：


iframeNode.contentDocument.designMode = "on";

插件體驗

本demo已經(jīng)開發(fā)有更方便的腳本版本：

如果你對網(wǎng)頁腳本開發(fā)感興趣，參考：

為什么推薦前端學習油猴腳本開發(fā)？juejin.cn/book/751468…

關聯(lián)API

與designMode關聯(lián)的API其實還有contentEditable和execCommand（已棄用，但部分瀏覽器還可以使用）。

contentEditable與designMode功能類似，不過contentEditable可以使特定的 DOM 元素變?yōu)榭删庉嫞?code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.87em; overflow: auto; position: relative; line-height: 1.75; word-break: break-word; border-radius: 2px; background-color: rgb(255, 245, 245); color: rgb(255, 80, 44); padding: 0.065em 0.4em;">designMode只能使整個文檔可編輯。

特性	`contentEditable`	`document.designMode`
作用范圍	可以使單個元素可編輯	可以使整個文檔可編輯
啟用方式	設置屬性為 `true`或 `false`	設置 `document.designMode = "on"`
適用場景	用于指定某些元素，如 `<div>`, `<span>`等	用于讓整個頁面變?yōu)榭删庉?/td>
兼容性	現(xiàn)代瀏覽器都支持	現(xiàn)代瀏覽器都支持，部分老舊瀏覽器可能不支持

document.execCommand() 方法允許我們在網(wǎng)頁中對內容進行格式化、編輯或操作。它主要用于操作網(wǎng)頁上的可編輯內容（如 <textarea> 或通過設置 contentEditable 或 designMode 屬性為 "true" 的元素），例如加粗文本、插入鏈接、調整字體樣式等。由于它已經(jīng)被W3C棄用，所以本文也不再介紹了。