`
无心徘徊
  • 浏览: 162594 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

iframe高度解析

 
阅读更多
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的高度,以优化用户体验。 首先,我们需要理解同源策略。同源策略是浏览器为了保障安全而实施的一项规定,它只允许...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

    iframe高度自适应

    ### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...

    iFrame 自动调整高度

    ### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中,经常会遇到需要将一个网页嵌入到另一个网页中的场景,这时候就会用到`<iframe>`标签。然而,由于`<iframe>`的高度默认是固定的,在内容发生变化时...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的...总的来说,"iframe自适应高度.rar"这个主题涵盖了iframe的使用、同源策略的理解以及JavaScript实现iframe高度自适应的技术细节,这些都是前端开发中非常实用的知识点。

    自动改变iframe的高度

    ### 自动改变iframe的高度 在Web开发中,`iframe`是一种常用的技术,它允许在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细...

    iframe高度自适应 js

    ### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就需要用到`<iframe>`标签。但是,默认情况下,`<iframe>`的高度是固定的,这往往会导致...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    1. **Iframe高度自适应原理** - 通常,Iframe的高度是由其内容决定的,但浏览器默认并不会自动更新其高度以适应内容的变化。为了解决这个问题,我们需要编写JavaScript代码来检测Iframe内部页面的加载状态,并根据...

    iframe_自适应高度(简单好用).txt

    然而,在使用`iframe`时,一个常见的挑战是如何使其高度自适应,即根据内部加载内容的高度自动调整其高度,而不是固定不变。这不仅能够提升用户体验,还能确保页面布局更加灵活和美观。 ### 知识点一:`iframe`...

    iframe窗口高度自适应的又一个巧妙实现思路

    `agent.html`则通过解析`location.hash`获取`other.html`传递的高度,并使用`parent.parent.resize`调用`index.html`中的`resize`函数。 关键点在于,通过在`iframe.src`中添加时间戳或随机值,每次`agent.html`的...

    iframe 自适应高度

    - **SEO**:搜索引擎爬虫可能无法正确解析`iframe`内的内容,这可能影响页面的搜索排名。 - **可访问性**:对于屏幕阅读器等辅助技术,`iframe`内容可能不易于访问,需要确保添加正确的`title`属性和`aria`属性以...

    嵌入到HTML的iframe自动适应大小

    自动调整iframe高度的核心在于监听页面加载完成事件,然后通过JavaScript读取iframe内部内容的高度,并将其设置为iframe本身的高度。这一过程通常需要针对不同浏览器进行适配,因为iframe在不同的浏览器中可能采用...

    iframe自适应高度

    ### iframe自适应高度实现原理与应用 #### 一、引言 在网页开发过程中,`iframe`(Inline Frame)常被用于嵌入另一个HTML文档或其他类型的文档,如PDF或SWF文件等。然而,默认情况下,`iframe`的高度是固定的,这...

    jsp页面iframe高度自适应的js代码

    总结一下,实现JSP页面中IFrame高度自适应的关键步骤包括: 1. 在主页面中,获取当前页面的文档高度并将其添加到IFrame的`src`属性中。 2. 在IFrame加载的页面中,解析URL的`hash`部分获取高度参数。 3. 使用...

    外部滚动条控制iframe

    }/* 设置iframe的宽度和高度 */ #d1{width:22px;height:350px;float:left;overflow-x:hidden;overflow-y:scroll;} /* 设置外部滚动条的样式和滚动方向 */ #d2{width:22px;height:2500px;} /* 创建一个高长的div,...

    HTML经典教材-iframe详细介绍

    这是因为浏览器在解析HTML时,`iframe`的实际内容高度在一开始并不明确,只有当页面加载完成才能获取。以下是一个简单的JavaScript示例,用于动态调整`iframe`的高度: ```javascript window.onload = function() {...

    iframe实例

    本实例将通过两个具体的例子来深入解析`iframe`的使用方法。 **例子一:嵌入外部网页** 在第一个例子中,我们将会看到如何使用`iframe`来嵌入一个外部网站。`src`属性是`iframe`的关键,它指定要加载的网页URL。...

    flex中的iframe源码

    5. **样式调整**:为了使iframe看起来更像标准的HTML元素,我们可能需要调整它的样式,如宽度、高度、边框等,这可以通过CSS样式或者直接在Flex组件上设置属性来完成。 6. **安全与性能**:由于Flash Player的安全...

    html 网页加载

    - **定义**:分别指定`<iframe>`的宽度和高度。 - **示例**:`width="500"`和`height="230"`分别设置`<iframe>`的宽度为500像素,高度为230像素。 #### `scrolling`属性 - **定义**:控制`<iframe>`内部是否显示...

Global site tag (gtag.js) - Google Analytics