牛逼!只需一行代码,任意网页秒变可编辑!

大家好,我是石小石!


在我们日常工作中,可能会遇到截图页面的场景,有时页面有些内容不符合要求,我们可能需要进行一些数值或内容的修改。如果你会PS,修改内容难度不高,如果你是前端,打开控制台也能通过修改dom的方式进行简单的文字修改。

今天,我就来分享一个冷门又实用的前端技巧 ------ 只需一行 JavaScript 代码,让任何网页瞬间变成可编辑的! 先看看效果:

甚至,还可以插入图片等媒体内容

如何实现

很难想象,这么炫酷的功能,居然只需要在控制台输入一条指令:

js 复制代码
document.designMode = "on";

打开浏览器控制台(F12),复制粘贴这行代码,回车即可。

如果你想关闭此功能,输入document.designMode = "off"即可。

Document:designMode 属性

MDN是这样介绍的:

document.designMode 控制整个文档是否可编辑。有效值为 "on""off"。根据规范,该属性默认为 "off"。Firefox 遵循这一标准。早期版本的 Chrome 和 IE 默认为 "inherit"。从 Chrome 43 开始,默认为 "off" 并不再支持 "inherit"。在 IE6-10 中,该值为大写。

兼容性方面,基本上所有浏览器都是支持的。

借助次API,我们也能实现Iframe嵌套页面的编辑:

js 复制代码
iframeNode.contentDocument.designMode = "on";

关联API

与designMode关联的API其实还有contentEditable和execCommand(已弃用,但部分浏览器还可以使用)。

contentEditabledesignMode功能类似,不过contentEditable可以使特定的 DOM 元素变为可编辑,而designMode只能使整个文档可编辑。

特性 contentEditable document.designMode
作用范围 可以使单个元素可编辑 可以使整个文档可编辑
启用方式 设置属性为 truefalse 设置 document.designMode = "on"
适用场景 用于指定某些元素,如 <div>, <span> 用于让整个页面变为可编辑
兼容性 现代浏览器都支持 现代浏览器都支持,部分老旧浏览器可能不支持

document.execCommand() 方法允许我们在网页中对内容进行格式化、编辑或操作。它主要用于操作网页上的可编辑内容(如 <textarea> 或通过设置 contentEditabledesignMode 属性为 "true" 的元素),例如加粗文本、插入链接、调整字体样式等。由于它已经被W3C弃用,所以本文也不再介绍了。

相关推荐
伍哥的传说16 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783817 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊29 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为