`

【转】关于JS的contentDocument,contentEditable,designMode

 
阅读更多

Iframe自适应高度


<script language="JavaScript"> 
//** iframe自动适应页面 **//

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

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

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

function dyniframesize() 
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
           if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

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

HtmlEdit.document.designMode="On";

HtmlEdit是iframe对象ID

IE 中可以设置contentEditable="true"

把div的contentEditable属性设置为 true,在IE浏览器中就可以看到效果了,div中元素都变成可以编辑的了。
<div id="tt" contentEditable="true">
</div>

<body contentEditable="true">    则整个页面都可以编辑了。
Firefox中可以   使用javascript语句设置属性contentDocument.designMode为 "on"

iframeName.document.designMode="on" ;
其中iframeName 为iframe控件的name属性。

在 IE7和 FireFox2.0中测试通过

分享到:
评论

相关推荐

    编辑器中designMode和contentEditable的属性的介绍

    在Firefox中,可以通过JavaScript设置`contentDocument`的`designMode`来达到类似的效果: ```javascript iframeName.document.designMode = "on"; ``` 这里,`iframeName`是`iframe`控件的`name`属性。 然而,...

    document.designMode的功能与使用方法介绍

    `document.designMode` 是一个非常有用的特性,主要应用于网页开发中,允许开发者开启或关闭页面元素的可编辑性。这个属性允许用户直接在浏览器中编辑HTML内容,类似于一个简单的在线文本编辑器。以下是对 `document...

    深入解析contentWindow, contentDocument

    `contentWindow` 和 `contentDocument` 是两个非常重要的JavaScript属性,它们用于在iframe之间进行通信和操作。 `contentWindow` 是一个对象,它代表了嵌入在iframe中的窗口,即子窗口的`window`对象。通过这个...

    iframe框架\JS获取iframe元素

    除了简单的元素操作外,还可以利用`designMode`和`contentEditable`属性来重写`iframe`中的内容,使之成为可编辑状态。 ```javascript var iObj = document.getElementById('iId').contentWindow; iObj.document....

    JS页面跳转和js对iframe进行页面跳转、刷新

    在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对iframe内的页面进行跳转与刷新。本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和...

    javascript动态调整iframe高度

    `javascript`提供了解决这个问题的方案,即动态调整`iframe`的高度,确保内容完整显示,同时保持页面整洁美观。下面我们将详细探讨如何使用`javascript`来实现这一功能。 1. 获取`iframe`元素 在`javascript`中,...

    js 打印以及预览功能实现

    在JavaScript(js)中实现打印和预览功能是一项常见的需求,尤其在Web开发中。本文将详细介绍如何基于JavaScript实现这一功能,并确保其在IE、Firefox和Google等主流浏览器中的兼容性。 首先,我们需要理解...

    js调用-嵌入iframe

    在网页开发中,JavaScript(简称JS)是一种广泛使用的客户端脚本语言,用于增强用户的交互体验。其中,"js调用-嵌入iframe"是JS在处理页面元素,特别是与IFrame(内联框架)交互时的一个重要技术。IFrame允许在单一...

    动态创建iframe,并动态添加js执行代码

    在IT行业中,动态创建iframe和动态添加JavaScript代码是一种常见的技术,尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先,`iframe`(Inline Frame)是HTML中的一种元素,...

    学习js在线html(富文本,所见即所得)编辑器

    document.getElementById('myEditer').contentDocument.designMode = 'on'; ``` 接着,我们要实现选中文本的功能。在JavaScript中,我们可以利用`document.selection.createRange()`方法来选取文本,并通过`sel....

    js iframe 方法及元素相互调用

    在JavaScript(JS)中,`iframe`是一种非常有用的元素,它允许我们在一个页面中嵌入另一个页面。这种技术常用于加载外部内容、实现页面部分刷新、或者在不同域之间进行跨域通信。本文将深入探讨如何使用JS与`iframe`...

    js iframe 打印 打印预览 页眉页脚的设置

    在JavaScript(JS)中,利用iframe进行打印和打印预览是常见的需求,特别是在网页开发中。这个场景下,我们可能需要自定义页眉和页脚,以提供更专业的打印效果。下面将详细介绍如何通过JS实现这个功能。 首先,我们...

    精谈iframe的作用和使用方式

    frame.contentDocument.designMode = 'on'; } ``` 3. **多层嵌套**:`iframe`支持多层嵌套,这意味着一个`iframe`内可以再嵌入另一个`iframe`,实现更复杂的页面布局和功能。 4. **兼容性问题**:需要注意的...

    js操作iframe的一些知识

    这个“js操作iframe的一些知识”主题涵盖了如何利用JavaScript与iframe进行交互,包括创建、访问、修改以及通信等多个方面。下面我们将深入探讨这些关键知识点。 1. **创建iframe**:首先,你需要在HTML中声明一个...

    js.zip_iframe

    在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中起着至关重要的作用。"js.zip_iframe"这个标题暗示我们,这里涉及到的是一个使用JavaScript技术来实现的压缩包,其中可能包含了一个...

    [导入]Javascript获取IFrame内容(兼容IE&FF)

    获取Iframe内容的关键在于JavaScript的`contentWindow`或`contentDocument`属性。在非跨域情况下,可以通过以下方式访问: 1. `contentWindow`: 对于支持DOM操作的浏览器(如FF),`contentWindow`属性可以直接访问...

    Java Web应用客户端编程JS经典事例

    在Java Web应用开发中,JavaScript(JS)是客户端编程的核心技术,它负责处理用户交互、动态更新内容以及与服务器进行异步通信。本资源“Java Web应用客户端编程JS经典事例”显然是一份涵盖多种JS实用技巧和示例的...

    js定时刷新页面的方法

    在JavaScript(JS)中,页面刷新是常见的操作,主要用于更新页面内容或重新加载页面数据。在Web开发中,我们有时需要实现自动刷新、特定条件下刷新、或者通过子窗口控制父窗口的刷新。以下是对这些方法的详细介绍: ...

    JS操作iframe里的dom

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在操作DOM(文档对象模型)方面具有强大的功能。当涉及到在iframe中操作DOM时,情况会变得稍微复杂一些,因为iframe实际上是一个独立的浏览上下文...

Global site tag (gtag.js) - Google Analytics