【转】关于ＪＳ的contentDocument,contentEditable,designMode

最新推荐文章于 2023-10-02 15:36:00 发布

dalaoshu321

最新推荐文章于 2023-10-02 15:36:00 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：设计模式 javascript ViewUI

本文链接：https://blog.youkuaiyun.com/dalaoshu321/article/details/84389543

javascript 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使Iframe自适应其内容高度的方法，并提供了JavaScript代码实现。此外，还详细介绍了如何通过设置iframe的设计模式属性来实现文档的可编辑性。

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

Iframe自适应高度

//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

//定义iframe的ID
var iframeids=["content"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

将文档设置为设计模式

要将整个文档设置为设计模式，可以对文档对象本身设置 designMode 属性。当文档处于设计模式时，将不运行脚本。这样，似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意，但这样做没有作用。当用户打开它后，它将保持在设计模式状态。当他们下次单击此按钮时，它将被选定而不是被单击，他们再次单击它，将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式：

<script for="btnDesign" event="onclick">
targetDoc = document.frames(0).document;
if (targetDoc.designMode == "On")
targetDoc.designMode = "Off";
else
targetDoc.designMode = "On";
</script>
<button
<iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe>

designMode 属性的值始终以首字母大写格式存储，即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。

contentEditable

IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit