`

监听父窗口的变化自适应子页面的高度

F# 
阅读更多
<script>
/***********************监听iframe的onclik事件*****************/
var timeHandle;
function setEvent(){
try{
window.frames["childframe"].document.body.onclick=function(){
var f=document.getElementById('childframe');
   f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}

}catch(e){}
timeHandle=setTimeout(setEvent,200);
}
setEvent();

/*************************装载的时候自适应高度************************/
function resizeFrame(f) {
  f.style.height = f.contentWindow.document.body.scrollHeight + "px";
 
}
</script>

  <iframe id=childframe  onload="resizeFrame(document.getElementById('childframe'))" scrolling="no" name=childframe src="yoursrc" width=100% height=100% frameborder=0 border=0 ></iframe>
分享到:
评论
1 楼 yangyunzhou 2010-08-15  
试了一下, 貌似不行

相关推荐

    框架自适应高度实例(动态调节框架高度)

    - **监听事件**:使用JavaScript的`resize`事件监听子页面的变化。这通常在子页面的`window`对象上进行。 - **获取内容高度**:在事件触发时,计算子页面的内容区域高度,包括所有可见元素。 - **调整框架高度**...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

    iframe自适应高度

    然而,`iframe` 的高度问题经常困扰着开发者,尤其是在内容动态变化时,如何让`iframe`自适应其内容的高度,避免出现滚动条或者内容被截断的问题呢。本篇文章将深入探讨`iframe`自适应高度的解决方案,并结合实际...

    vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法

    总之,解决多个ECharts图表在不同页面上随窗口大小变化而动态调整的问题,关键在于使用`element-resize-detector`库来监听元素尺寸变化,而不是单纯依赖`window.onresize`事件。这样可以确保每个ECharts实例都能正确...

    jQuery自适应父容器宽度高度代码

    6. 使用`$(window).resize()`事件监听窗口尺寸变化,当窗口大小改变时,重新执行以上步骤以保持自适应。 这个特效对于动态响应用户屏幕尺寸变化的网站尤其有用,能够提供更好的用户体验。通过结合CSS3的媒体查询,...

    jQuery自适应父容器宽度高度代码.zip

    这样,无论窗口大小如何变化,文本都会自适应地填充其父容器。 需要注意的是,这种方法虽然简单有效,但在处理大量文本或性能敏感的场景下可能会有性能问题,因为它涉及到持续的DOM操作和循环。此外,对于中文文本...

    JS控制DIV自适应高度

    2. **JS监听内容变化**:可以使用JavaScript的事件监听器,如`MutationObserver`,来检测div内容的变化。一旦内容发生变化,就重新计算div的高度。例如: ```javascript const targetNode = document....

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

    然而,当`iframe`内的页面内容发生变化时,如何实现`iframe`窗口高度的自适应是一个常见且重要的需求。`iframe`的滚动条不仅影响用户体验,也可能导致页面布局不协调。本篇文章将详细介绍一种巧妙的实现`iframe`窗口...

    iframe高度自适应

    2. **自适应需求**:随着内容的变化自动调整`&lt;iframe&gt;`的高度,避免出现不必要的滚动条或内容被隐藏的情况。 #### 二、实现方法 ##### 1. JavaScript动态调整高度 通过JavaScript监听`&lt;iframe&gt;`加载完成事件(`...

    iframe跨域常用问题和iframe页面自适应

    4. **JavaScript监听窗口大小变化**:通过JavaScript监听`resize`事件,当窗口大小改变时,动态调整`iframe`的大小。例如: ```javascript window.addEventListener('resize', function() { document....

    自适应高度处理

    - 使用JavaScript监听窗口大小变化(`window.resize`)和`iframe`加载事件,动态计算并设置`iframe`的高度。例如,可以获取`iframe`内容Document的body高度,并赋值给`iframe`的`height`属性。 ```javascript var ...

    自适应大小轮播图

    当浏览器窗口尺寸变化时,轮播图会根据这些规则自动调整其宽度和高度,保持内容的可读性和视觉效果的完整性。 在实现自适应轮播图的过程中,有以下几个关键知识点: 1. **布局设计**:通常使用流式布局(Fluid ...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    // 监听窗口大小变化,当窗口大小变化时重新调整iframe高度 $(window).on('resize', resizeIframe); // 如果iframe内容加载延迟,可以使用load事件来确保内容加载完成后调整高度 $('#myIframe').on('load', ...

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    - **MutationObserver**:这是一种监听DOM变化的API,当iFrame内容发生变化时,可以触发回调函数,动态计算并设置iFrame的高度。 - **contentWindow和contentDocument**:这两个属性分别提供了对iFrame窗口和文档...

    手机访问网页自适应网页及图片高度

    10. **JavaScript解决方案**:如果CSS无法满足需求,可以使用JavaScript动态计算和调整元素大小,如监听窗口大小变化事件(`resize`)来实时调整布局。 综上所述,实现手机访问网页时的自适应网页和图片高度,需要...

    根据浏览器屏幕大小高度自适应

    在网页设计中,为了提供优秀的用户体验,让网页内容能够适应不同设备和屏幕尺寸的变化,我们需要实现根据浏览器屏幕大小高度自适应的功能。这涉及到几个关键概念和技术,包括`height`、`clientHeight`以及`onresize`...

    iframe 自适应高度

    标题"iframe自适应高度"和描述中的两个文件"iframe 自适应高度(解决内适应最好).htm"和"随窗口变化而变化的iframe(解决外适应最好).htm"正是针对这个问题提供了解决方案。 1. **iframe自适应高度(解决内适应最好)**...

    图片尺寸自适应算法

    这些库可以监听窗口大小的变化,然后实时更新图片尺寸。 8. **WebP格式**: WebP是一种现代的图片格式,支持有损和无损压缩,且在许多情况下,相比于JPEG和PNG,它能提供更小的文件大小,这对于自适应图片加载尤为...

Global site tag (gtag.js) - Google Analytics