document.designMode=‘on‘设计网页；随意改动网站内容

最新推荐文章于 2025-04-22 14:10:02 发布
原创 最新推荐文章于 2025-04-22 14:10:02 发布 · 2.2w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #web #css #html

这篇博客介绍了如何通过浏览器的开发者工具（F12）进入网页控制台，并在Console中输入指令`document.designMode='on'`，激活页面的可编辑模式，从而实现像Word一样在浏览器中对网页内容进行增删改查的操作。这对于网页开发者进行快速测试和调试非常有用。
该文章已生成可运行项目，

1.打开一个需要更改的网站，按F12进入网页控制台界面,点击Console
在这里插入图片描述
2.在Console下的输入框输入：document.designMode='on'，再按回车键
在这里插入图片描述
3.然后就可以随意修改页面了，可以像word种的文本一样，在浏览器里实现增删改查。
在这里插入图片描述

本文章已经生成可运行项目
document.designMode的功能与使用方法介绍
10-30
document.designMode的功能与使用方法介绍
只需一行代码，任意网页秒变可编辑
huomore的博客
05-08 554
在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符合要求，我们可能需要进行一些数值或内容的修改。如果你会PS，修改内容难度不高，如果你是前端，打开控制台也能通过修改dom的方式进行简单的文字修改。今天，我就来分享一个冷门又实用的前端技巧 —— 只需一行 JavaScript 代码，让任何网页瞬间变成可编辑的！打开浏览器控制台（F12），复制粘贴这行代码，回车即可。甚至，还可以直接复制图片多媒体等文件。如果你想关闭此功能，输入即可。
designmode_designMode
culuo8053的博客
08-10 150
designmodeEvery once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics...
任意修改网页（document.designMode = “on“）
小刘的博客
10-25 1217
将网页变为可编辑模式
HTML中的designMode 属性
ABing
01-05 772
HTML DOM designMode document.designMode属性设置或返回文档是否可编辑 document.designMode 控制整个文档是否可编辑。有效值为 “on” 和 “off” 。根据规范，该属性默认为 “off” 。Firefox 遵循此标准。早期版本的 Chrome 和 IE默认为 “inherit” 。从 Chrome 43 开始，默认值为 “off” ，并且...
Document.designMode 在线编辑器模式
04-09 2198
Document.designMode 在线编辑器模式它表示当前的文档设计模式，黩认为"Off",表示文档不可编辑，但当您将其设置为"On"，即可成为可编辑的，因此您便像在FrontPage中使用它一样。 ~~~~~~~~
使用`document.designMode='on'`修改网页内容后如何保存修改？
最新发布
09-12
使用`document.designMode='on'`修改网页内容后，由于是在浏览器中对网页进行临时修改，并没有直接保存修改的功能。不过，可以通过以下几种方法来保存修改后的内容： ### 1. 手动复制粘贴 将修改后的网页内容手动...
document.designMode = "on"
04-08
通过设置全局属性 `document.designMode` 为 `'on'` 或 `'off'` 可以控制当前文档是否处于可编辑状态。当设为 `'on'` 时，用户可以直接在页面上修改内容[^1]。 ```javascript // 将整个文档切换到可编辑模式 ...
让你的网站可编辑的实现js代码
01-21
document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了！！ 四、按照你自己的意图修改好后，在地址栏中输入： 代码如下: [removed]document.body.contentEditable=’false’; void...
设置iframe的document.designMode后仅Firefox中其body[removed]为br
09-05
设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。这里仅列出各浏览器差异
编辑器中js跨二级域问题 document.designMode与domain冲突
robot的学习日志
03-21 1610
在不同二级域名下跨越访问：都加入如下js代码: document.domain="xyz.com"这样做可以在两个页面（如：up.xyz.com和www.xyz.com）中相互访问js。 不过在编辑器里面都会设置 document.designMode="on"，这样可以编辑当前html页面， 这样执行后代码的域已经还原为原来的于，就造成js代码不能相互访问。 为了处理这种情况，可
用document.designMode解决网页内容复制问题
专注于先进生产力方面的分享
12-28 879
在网页上遇到一些不好复制的内容时，可以试试打开文档编辑模式，就能像在编辑器里一样选择复制和修改了。
html5入门初学者笔记（十一）- 全局属性（designMode属性）
jeffrey_feng2018的博客
06-12 1540
designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本中被编辑修改。该属性有两个值——“on”与“off”。当该属性值被指定为“on”时，页面可编辑；当该属性值被指定为“off”时，页面不可编辑。使用JavaScript脚本来指定designMod...
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
zhouruitao的专栏
02-14 307
设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。这里仅列出各浏览器差异。重现如下：   <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br&l...
contentEditable和document.designMode的区别
wyd018fw
01-17 864
contentEditable和document.designMode的区别 2011年08月24日 　　contentEditable和document.designMode的区别http://www.xiahaixia.com/2011/03/15/contenteditable%E5%92%8Cdocument-designmode%E7%9A%84%E5%8C%BA%E5%88%...
20220928 代码实现鼠标选中复制（在开发者控制台打开浏览器文档的设计模式即可）
elijah8290的博客
10-19 878
直接复制网页内容
不会还有人在传统网页定位修改，看我用一行JS代码让你的网页变为可编辑
芳草萋萋鹦鹉洲哦
04-22 289
designModeDocument 的 designMode 属性控制整个文档是否可编辑。你可以使用它使网页上的所有内容都可编辑，浏览器兼容性： designMode览器中都受支持。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值