var cwin=document.getElementById("cwin");
/**
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
cwin.height = cwin.contentDocument.body.offsetHeight;
}
else if(cwin.Document && cwin.Document.body.scrollHeight){
cwin.height = cwin.Document.body.scrollHeight+1;
}
}
}*/
var pheight = parent.document.getElementById("mainframe").contentWindow.document.body.scrollHeight;
var cheight = cwin.contentWindow.document.body.scrollHeight;
parent.document.getElementById("mainframe").height = pheight + cheight;
cwin.height=cheight;
注释部分为iframe自适应效果
contentWindow.document.body.scrollHeight 得到frame所在页面的滚动高度(即总长)
.contentWindow.document.documentElement.scrollHeight 得到frame的显示高度(有滚动条的情况下)
分享到:
相关推荐
这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何实现跨域控制iframe的高度,以优化用户体验。 首先,我们需要理解同源策略。同源策略是浏览器为了保障安全而实施的一项规定,它只允许...
### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...
### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...
### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中,经常会遇到需要将一个网页嵌入到另一个网页中的场景,这时候就会用到`<iframe>`标签。然而,由于`<iframe>`的高度默认是固定的,在内容发生变化时...
【标题】:“iframe自适应高度.rar”涉及到的...总的来说,"iframe自适应高度.rar"这个主题涵盖了iframe的使用、同源策略的理解以及JavaScript实现iframe高度自适应的技术细节,这些都是前端开发中非常实用的知识点。
### 自动改变iframe的高度 在Web开发中,`iframe`是一种常用的技术,它允许在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细...
### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就需要用到`<iframe>`标签。但是,默认情况下,`<iframe>`的高度是固定的,这往往会导致...
1. **Iframe高度自适应原理** - 通常,Iframe的高度是由其内容决定的,但浏览器默认并不会自动更新其高度以适应内容的变化。为了解决这个问题,我们需要编写JavaScript代码来检测Iframe内部页面的加载状态,并根据...
然而,在使用`iframe`时,一个常见的挑战是如何使其高度自适应,即根据内部加载内容的高度自动调整其高度,而不是固定不变。这不仅能够提升用户体验,还能确保页面布局更加灵活和美观。 ### 知识点一:`iframe`...
`agent.html`则通过解析`location.hash`获取`other.html`传递的高度,并使用`parent.parent.resize`调用`index.html`中的`resize`函数。 关键点在于,通过在`iframe.src`中添加时间戳或随机值,每次`agent.html`的...
- **SEO**:搜索引擎爬虫可能无法正确解析`iframe`内的内容,这可能影响页面的搜索排名。 - **可访问性**:对于屏幕阅读器等辅助技术,`iframe`内容可能不易于访问,需要确保添加正确的`title`属性和`aria`属性以...
自动调整iframe高度的核心在于监听页面加载完成事件,然后通过JavaScript读取iframe内部内容的高度,并将其设置为iframe本身的高度。这一过程通常需要针对不同浏览器进行适配,因为iframe在不同的浏览器中可能采用...
### iframe自适应高度实现原理与应用 #### 一、引言 在网页开发过程中,`iframe`(Inline Frame)常被用于嵌入另一个HTML文档或其他类型的文档,如PDF或SWF文件等。然而,默认情况下,`iframe`的高度是固定的,这...
总结一下,实现JSP页面中IFrame高度自适应的关键步骤包括: 1. 在主页面中,获取当前页面的文档高度并将其添加到IFrame的`src`属性中。 2. 在IFrame加载的页面中,解析URL的`hash`部分获取高度参数。 3. 使用...
}/* 设置iframe的宽度和高度 */ #d1{width:22px;height:350px;float:left;overflow-x:hidden;overflow-y:scroll;} /* 设置外部滚动条的样式和滚动方向 */ #d2{width:22px;height:2500px;} /* 创建一个高长的div,...
这是因为浏览器在解析HTML时,`iframe`的实际内容高度在一开始并不明确,只有当页面加载完成才能获取。以下是一个简单的JavaScript示例,用于动态调整`iframe`的高度: ```javascript window.onload = function() {...
本实例将通过两个具体的例子来深入解析`iframe`的使用方法。 **例子一:嵌入外部网页** 在第一个例子中,我们将会看到如何使用`iframe`来嵌入一个外部网站。`src`属性是`iframe`的关键,它指定要加载的网页URL。...
5. **样式调整**:为了使iframe看起来更像标准的HTML元素,我们可能需要调整它的样式,如宽度、高度、边框等,这可以通过CSS样式或者直接在Flex组件上设置属性来完成。 6. **安全与性能**:由于Flash Player的安全...
- **定义**:分别指定`<iframe>`的宽度和高度。 - **示例**:`width="500"`和`height="230"`分别设置`<iframe>`的宽度为500像素,高度为230像素。 #### `scrolling`属性 - **定义**:控制`<iframe>`内部是否显示...