IFrame编辑

最新推荐文章于 2021-06-17 05:59:48 发布
最新推荐文章于 2021-06-17 05:59:48 发布
阅读量323 收藏
点赞数
分类专栏： HTML 文章标签： html web design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_pick/article/details/106907770
版权

关于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）
最低0.47元/天 解锁文章
aovpha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Firefox中Iframe不能编辑的js
KDPZDP的专栏
05-09 1122
function MakeEditable(){       var theIframe = document.getElementById("wrEditor")       theIframe.contentWindow.document.body.contentEditable = true;          //in moz you cannot change desgi
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
10-22
在JavaScript中，对于基于iframe的编辑器，有时我们需要在用户光标所在的位置插入文本或者图片。本文将详细讲解如何实现这个功能，并确保其在IE和Firefox这两个主流浏览器中都能正常工作。 首先，我们需要一个简单...
编辑器中designMode和contentEditable的属性的介绍
weixin_34014277的博客
07-05 180
2019独角兽企业重金招聘Python工程师标准>>> ...
IE下iframe内的文本框无法聚焦输入
什么时候才能成为大N
11-10 1827
工作中遇到的，弹出的层次中有iframe, iframe中有文本框，点取消后，再打开
html iframe 编辑,让iframe可编辑
weixin_39821605的博客
06-17 256
functionEnableEdit(){vareditor;editor= document.getElementById("HtmlEdit").contentWindow;//针对IE浏览器, make it editableeditor.document.designMode = ‘On‘;editor.document.contentEditable= true;//For compat...
在IFRAME中编辑（HTML文本在线编辑器原理之一）
ZetaChow
09-27 2897
editarea.document.designMode="on";function a(){ alert(editarea.document.body.innerHTML);} 
javascript开发随笔3 开发iframe富文本编辑器的一点体会
10-28
前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google
iframe编辑器火狐和IE插入图片的区别
11-25
兼容火狐和IE插入图片的js代码，IE9不兼容showModalDialog的处理方法。
IFrame简单例子
05-26
4. **多窗口应用**：例如，在线编辑器、富文本框等，它们可能包含多个独立操作的面板。 5. **跨域通信**：通过`postMessage`和`message`事件实现不同源IFrame之间的通信。 ### IFrame的高级用法 1. **沙盒模式**：...
设置iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同
zhouruitao的专栏
02-14 166
测试代码如下   <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head&
操作iframe里面的标签内容
weixin_30500289的博客
12-04 379
1.在iframe的body里添加内容$("iframe").contents().find("body").html('内容');contents()的api:查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容2.替换整个iframe标签里面的内容，包括头部，body等。比如在去一个文本域里面的html 转化为 可视界面，这时候，我们可以把文本域里面的整个h...
让iframe可编辑
weixin_30780221的博客
09-24 196
function EnableEdit() { var editor; editor = document.getElementById("HtmlEdit").contentWindow; // 针对IE浏览器, make it editable editor.document.designMode = 'On'; editor.documen...
iframe实现编辑器
01-04 687
1、html中定义 2、js中创造内容 参考http://blog.csdn.net/cuew1987/article/details/9374563 var eleEditor = $('#Editor').get(0); // 不需要兼容contentWindow所以浏览器都支持，contentDocument Firefox和IE8+支持 var edito
用iframe做编辑器
weixin_33748818的博客
11-12 340
<IFRAME   src=""about:blank""   NAME=""LatticeTemp""   ID=""LatticeTemp""   CONTENTEDITABLE=""true""   WIDTH=""1""   HEIGHT=""1""
iframe 编辑内部页面的输入框及事件监听
最新发布
05-25
可以通过以下步骤实现： 1. 在父页面中添加一个 iframe 标签，设置其 src 属性为要嵌入的页面的 URL。 2. 在 iframe 中的页面中添加需要监听的事件。 3. 在父页面中获取 iframe 中的输入框元素，以及其他需要监听的元素。 4. 使用 JavaScript 中的 postMessage() 方法向 iframe 中发送消息，监听 iframe 中的事件并做出相应处理。 下面是一个示例代码： 父页面代码： ```html <!DOCTYPE html> <html> <head> <title>父页面</title> </head> <body> <iframe id="my-iframe" src="inner-page.html"></iframe> <script> // 获取 iframe 中的输入框元素 var iframe = document.getElementById("my-iframe"); var innerInput = iframe.contentWindow.document.getElementById("inner-input"); // 监听 iframe 中的事件 window.addEventListener("message", function(event) { if (event.origin !== "http://localhost:8000") { return; } // 处理事件 if (event.data.type === "input") { console.log("输入框的值为：" + event.data.value); } else if (event.data.type === "button") { console.log("点击了按钮！"); } }); // 向 iframe 发送消息 function sendMessage(type, value) { iframe.contentWindow.postMessage({ type: type, value: value }, "*"); } </script> </body> </html> ``` 内部页面代码： ```html <!DOCTYPE html> <html> <head> <title>内部页面</title> </head> <body> <input type="text" id="inner-input"> <button id="inner-button">点击我</button> <script> // 监听输入框的输入事件 var innerInput = document.getElementById("inner-input"); innerInput.addEventListener("input", function() { // 向父页面发送消息 window.parent.postMessage({ type: "input", value: innerInput.value }, "*"); }); // 监听按钮的点击事件 var innerButton = document.getElementById("inner-button"); innerButton.addEventListener("click", function() { // 向父页面发送消息 window.parent.postMessage({ type: "button" }, "*"); }); </script> </body> </html> ``` 在这个示例中，父页面和内部页面都是同一个域名下的页面，所以使用了通配符 "*" 来接受所有来源的消息。在实际应用中，应该根据需要设置特定的来源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值