iframe可编辑
实现iframe可编辑用到 document.designMode='on'(允许编辑)
1.
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<body onload="f.document.designMode='on'">
<iframe id="f"></iframe>
<button onclick="f.document.body.innerHTML=''">清空</button>
<button onclick="alert(f.document.documentElement.outerHTML)">代码</button>
</body>
2. frames :获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合(取得window对象集合)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<iframe id="if"></iframe>
<button onclick="window.frames.f.document.body.innerHTML=''">清空</button>
<button onclick="alert(window.frames.f.document.documentElement.outHTML)">输出 代码</button>
<script>
window.frames.f.document.designMode='on';
</script>
- <iframe id="editor" name="editor"></iframe>
- </body>
- </html>
- <script type="text/javascript">
- var _frame = document.getElementById("editor");
- var _window = _frame.contentWindow;
- _window.document.designMode="on";//设置为设计模式,就可以填写内容了
- _window.document.canHaveHTML=true;/.可以包含HTML
- initEditor();
- function initEditor(){
- //可以写一堆事件处理
- _window.document.onmouseup= function(){
- }
- _window.document.click= function(){
- }
- }