IFrame编辑

最新推荐文章于 2025-05-09 10:44:00 发布

aovpha

最新推荐文章于 2025-05-09 10:44:00 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html web design

本文链接：https://blog.youkuaiyun.com/ice_pick/article/details/106907770

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了IFrame的编辑模式，包括如何开启编辑模式，详细解释了默认函数，并提供了一个函数对照表供参考，同时提到了内容获取的方法以及同源策略和编辑模式设置的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于IFrame编辑模式

开启编辑模式

document.getElementById("iframeid").contentWindow.document.designMode = "on";
document.getElementById("iframeid").contentWindow.document.contentEditable = true;

注意：如果是使用外链时需要处理同源校验，并且需要在控件内容加载完成后，设置编辑模式，如果不是链接，不需要监听加载完成，可以直接设置编辑模式。

默认函数

document.getElementById("iframeid").contentWindow.document.execCommand(cmd, isDefaultShowUI, value);

注意：一般的编辑操作JS已经提供了函数库，参考以下函数对照表即可。

函数对照表

命令（cmd）	展示界面交互（isDefaultShowUI）	参数值（value）	函数说明
bold	false/true	null	将选择的文字加粗
italic	false/true	null	将选择的文字转换为斜体
underline	false/true	null	将选择的文字加下划线
strikethrough	false/true	null	将选择的文字加删除线
fontsize	false/true	1-7	将选择的文字修改为指定字体大小
justifyleft	false/true	null	将选择的文字居左
justifycenter	false/true	null	将选择的文字居中
justifyright	false/true	null	将选择的文字居右
indent	false/true	null	左缩进
outdent	false/true	null	右缩进
insertorderedlist	false/true	null	插入有序列表
insertunorderedlist	false/true	null	插入无序列表
undo	false/true	null	撤销
redo	false/true	null	恢复撤销
removeformat	false/true	null	将选择的文字清除格式
forecolor	false/true	颜色字符串(#aaaaaa)	设置文档背景色
backcolor	false/true	颜色字符串(#aaaaaa)	将选择的文字修改为指定颜色

注意：isDefaultShowUI存在兼容性问题，如无特殊需求，建议设置成false。

内容获取

document.getElementById("iframeid").contentWindow.document.body.innerHTML;

参考链接