`

iframe透明 自适应高度

 
阅读更多

 

最近有些web页面经常用到iframe,但是遇到两个很棘手的问题,一是高度自适应的问题,二是iframe出现空白页面,要如何让它背景透明?我设置了style="background-color:transparent;"但没有效果,以下是解决方法:

 

<iframe
id="iframepage" name="mainIFrame"
frameBorder=0  allowtransparency="true"
style="background-color:transparent;min-height:1000px;"
scrolling=no width="100%" onLoad="iFrameHeight()">
</iframe>

 

    javascript:

<script type="text/javascript" language="javascript">
	function iFrameHeight() {
		var ifm = document.getElementById("iframepage");
		var subWeb = document.frames ? document.frames["iframepage"].document
				: ifm.contentDocument;
		if (ifm != null && subWeb != null) {
			ifm.height = subWeb.body.scrollHeight+72;
		}
	}
</script>

 

分享到:
评论

相关推荐

    html2canvas生成pdf(html高度自适应带iframe)

    以下是对这两个库以及与`iframe`、高度自适应和背景颜色处理相关的知识点的详细解释。 首先,`html2canvas`是一个JavaScript库,它的主要功能是将DOM(文档对象模型)转换为Canvas元素。这个过程被称为“屏幕截图”...

    iframe标签用法详解(属性、透明、自适应高度)

    在本文中,我们将深入探讨`iframe`标签的用法,包括它的属性、透明度设置以及如何实现自适应高度。 1. `iframe`标签定义和用法 `iframe`标签在HTML中成对出现,使用`&lt;iframe&gt;`作为起始标签,`&lt;/iframe&gt;`作为结束...

    [转]目前找到的最好的Iframe自适应高度代码

    在【标题】和【描述】中提到的代码,就是一种解决Iframe自适应高度问题的方法,它适用于多种浏览器,包括IE5.5、IE6.0、Firefox1.x以及Opera9.01。 首先,让我们深入理解这段代码的工作原理: 1. **Iframe的基本...

    js非常好用的代码,不要错过!

    - 为实现iframe自适应高度,可以利用JavaScript的 `onload` 事件和 `document.body.scrollHeight` 获取内容高度并动态设置。 5. 更改浏览器图标(Favicon): - 使用 `...

    50条网页制作小技巧集锦.pdf

    5. **IFrame自适应高度**:通过JavaScript,可以实现IFrame的高度自适应,例如,当IFrame内容发生变化时,更新IFrame的高度。这可以通过监听`onload`事件并修改IFrame的`style.height`来实现。 6. **浏览器图标设置...

    写了一个layout,拖动条连贯,内容区可为iframe

    - **自适应高度**:通过JavaScript设置元素的高度为浏览器视口高度,确保布局自适应。 2. **JavaScript逻辑** - **初始化布局高度**:通过`setInterval`每100毫秒更新一次布局高度,以适应窗口大小变化。 - **...

    dreamweaver代码汇编.pdf

    5. **IFrame自适应高度**:通过JavaScript和`onload`事件,可以实时调整IFrame的高度以匹配内容的高度,避免滚动条的出现。 6. **自定义浏览器图标**:通过`&lt;link&gt;`标签的`rel`属性设置为`Shortcut Icon`和`...

    html技巧代码

    - 自适应高度的iframe:通过`onload`事件和JavaScript动态调整高度,确保内容完全显示。 5. **设置浏览器图标(Favicon)**: - `&lt;link rel="Shortcut Icon" href="favicon.ico"&gt;` 用于IE和其他现代浏览器,将...

    Dreamwear设计常用代码 7-11.docx

    3. iframe(嵌入式帧)自适应高度: `iframe`用于在网页中嵌入另一个网页,但有时需要确保其高度自适应内容。例如: ```html &lt;iframe name="guestbook" src=...

    div+css布局中常用方法汇总.docx

    1. **文本框textarea自适应高度**:可以通过设置`textarea`的`style`属性,如`overflow-y: visible`,使其随内容自动调整高度。 2. **鼠标指针样式**:使用`cursor: pointer`可以使元素的鼠标指针变为手形,提示...

    10个常用CSS代码片段(DOC文档)

    - 通过设置`body &gt; #wrap`的高度为自适应且最小高度为100%,确保主内容区域可以扩展到屏幕底部。 - `#main`的`padding-bottom`值必须与`#footer`的高度相匹配,以预留出页脚的空间。 - 使用`margin-top: -150px;`来...

    企业微博开发规范

    4. **动态高度自适应**:由于Iframe的高度可能因内容变化而变化,应用应能自动调整高度,以防止内容溢出或出现滚动条,提升用户体验。 5. **关键逻辑**:开发者需处理好应用与微博平台之间的数据交换,确保用户授权...

    在个人网站中嵌入code.org-projects

    /* 自适应高度,需要code.org项目支持 */ } ``` 5. 测试和发布: 在发布之前,务必预览你的网站,确认代码段正确无误,项目能够正常加载和运行。如果有任何问题,检查HTML和CSS代码,修复可能的错误。 通过...

    js+div+css超酷多种弹出层 兼容各大浏览器

    - 在 IE 浏览器中,使用 iframe 来覆盖遮罩层以解决透明度问题。 #### 三、综合应用技巧 - **自适应布局**:通过 JavaScript 计算当前视口尺寸,动态调整弹窗的位置和大小,确保在不同分辨率下都能正常显示。 - **...

    artDialog_Demo

    25、可以自适应iframe内容的大小(不跨域的前提下) 26、对超过预设面积大小的对话框拖动自动采用替身的方式,以求拖动更流畅 27、新增加一个'data'的接口,它保存了你对话框每次创建的消息对象 (操作iframe消息...

    layer_API_帮助手册

    area属性用于设置弹出层的宽度和高度,支持自适应(auto)和具体数值。 6. 边框和遮罩控制(border与shade):border用于设置弹出层边框的大小、透明度和颜色。shade属性用于设置遮罩层的透明度和颜色。不显示边框或...

    jQuery Thickbox3.1 弹出层插件

    2. **透明度控制**:背景遮罩层可以设置透明度,使得弹出层更加突出,同时不影响页面的整体视觉效果。 3. **自适应大小**:弹出层可以根据内容自动调整大小,也可以手动设定固定尺寸。 4. **动画效果**:在弹出和...

    thickbox------------ jQuery好插件

    这个过程包括了动态计算屏幕尺寸、设置遮罩层透明度、加载内容以及处理关闭弹框的事件等步骤。 使用Thickbox的优点包括: 1. **简洁的API**:Thickbox提供了一套简单的API,使得开发者能够轻松地将弹出功能集成到...

Global site tag (gtag.js) - Google Analytics