iframe可编辑

 实现iframe可编辑用到 document.designMode='on'(允许编辑)

 1.


<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对象集合)

复制代码

<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>
  1. <iframe id="editor" name="editor"></iframe>  
  2. </body>  
  3. </html>  
  4. <script type="text/javascript">  
  5. var _frame = document.getElementById("editor");  
  6. var _window = _frame.contentWindow;  
  7. _window.document.designMode="on";//设置为设计模式，就可以填写内容了  
  8. _window.document.canHaveHTML=true;/.可以包含HTML  
  9. initEditor();  
  10.   
  11. function initEditor(){  
  12. //可以写一堆事件处理  
  13. _window.document.onmouseup= function(){  
  14. }  
  15. _window.document.click= function(){  
  16. }  
  17. }  
posted @ 2015-01-28 11:42  justlancer  阅读(512)  评论(0)    收藏  举报