前端整活神器！只需一行代码，瞬间编辑任意网页，想改哪里改哪里_document.body.contenteditable="true

前端整活神器！只需一行代码，瞬间编辑任意网页，想改哪里改哪里

有时候写技术文章或者做演示，总会遇到这样的需求：

“能不能直接在网页上随便改字，模拟一下效果？”

其实，前端早就给我们留了“彩蛋”——只需要一行代码，就能让当前网页秒变可编辑！

核心代码
在浏览器按下 F12，打开控制台（Console），输入这行代码：

document.body.contentEditable = true

回车。

然后你会发现，整个页面的文字、图片，统统可以像 Word 一样，随便修改，想怎么改就怎么改！

如果需要取消，则把 true 改为 false,或者刷新页面

再来个进阶版
除了 contentEditable，其实还有个老前端都知道的“黑科技”：

document.designMode = \"on\"

这个是更底层的页面编辑开关，打开之后，不仅能编辑，还能让鼠标变成输入状态，更加丝滑。
如果需要取消，则把 true 改为 false,或者刷新页面

如果是 iframe 页面怎么办？
比如很多后台管理系统，内容在 iframe 里面，这时候直接改外层是不行的。
也很简单，找到对应的 iframe 节点，写成这样：

iframeNode.contentDocument.designMode = \"on\"

瞬间搞定。如果需要取消，则把 true 改为 false,或者刷新页面

使用场景举几个

最后的小提醒
这种技巧只是在本地浏览器“假改”页面内容，刷新一下就恢复了，和真实存储数据没有关系。
如果真的需要保存改动，那就是另外的前端编辑器代码开发了。