`
流浪鱼
  • 浏览: 1692824 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态改变iframe的高度

 
阅读更多

//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
 //取到窗口的高度
 var winH = $(window).height();
 //取到页面的高度
 var bodyH = $(document).height();
 if(bodyH > winH){
  window.parent.document.getElementById("mainFrame").height=bodyH;
 }else{
  window.parent.document.getElementById("mainFrame").height=winH;
 }
 
});

父页面的iframe为
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

0
3
分享到:
评论

相关推荐

    javascript动态调整iframe高度

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

    JS动态修改iframe高度和宽度的方法

    JS动态修改iframe高度和宽度的方法主要涉及到JavaScript语言中对HTML元素进行操作的基本技巧,特别是针对iframe元素的尺寸调整。iframe元素在网页中常用于嵌入另一个HTML页面,而在JavaScript中,我们可以通过操作它...

    用javascript动态调整iframe高度的方法

    为了解决这个问题,我们可以利用JavaScript来动态调整iframe的高度,确保它始终适应其内部内容的大小。 在描述中提到的方法是通过编写一段JavaScript代码,使得iframe能够根据其内部页面内容的高度自动调整。这段...

    跨域控制iframe高度

    这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何实现跨域控制iframe的高度,以优化用户体验。 首先,我们需要理解同源策略。同源策略是浏览器为了保障安全而实施的一项规定,它只允许...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上...

    iframe动态适应页面高度

    iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常要处理的问题;现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动...

    iframe高度随子页高度变化

    标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于这个动态调整`iframe`高度的技术。 要实现`iframe`高度随子页高度变化,主要涉及以下几个关键点: 1. **设置iframe的初始高度**:首先,我们需要为`...

    js实现iframe自适应高度

    5. **处理动态内容变化**:如果`iframe`内的内容是动态加载的,例如通过AJAX请求,我们还需要监听`resize`事件,以便在内容改变时再次调整高度。 ```javascript if (iframe.contentWindow && iframe....

    自动改变iframe的高度

    - 如果嵌入的内容高度发生变化,如动态加载的内容,则需要手动调整`iframe`的高度。 - 对于响应式设计来说,固定的高度可能会导致布局问题。 因此,让`iframe`能够自动调整高度变得尤为重要。 #### 三、解决方案 ...

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    iframe根据页面内容自适应高度和宽度

    `iframe-resizer`库提供了一种解决方案,它允许父页面和子页面之间进行通信,动态调整`iframe`的高度。使用方法如下: - 首先,将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...

    iframe自适应子页面内容高度

    在同源情况下,可以使用以下JavaScript代码动态调整`iframe`高度: ```javascript function resizeIframe(iframeId) { var iframe = document.getElementById(iframeId); if (iframe && iframe.contentWindow && ...

    动态的改变IFrame的高度实现IFrame自动伸展适应高度

    动态改变IFrame高度的实现主要分为两种方法: **具体实现一:** 1. **JavaScript实现** 在IFrame子页面中,我们需要编写一个JavaScript函数`IFrameResize`。这个函数首先获取当前页面(子页面)的滚动高度`...

    再谈iframe自适应高度

    - 避免使用绝对值设置iframe高度,而是倾向于动态计算或响应式设计。 - 对于跨域问题,使用`postMessage`可以提高兼容性和安全性。 - 考虑到性能,尽量在iframe内容加载完成后才执行调整高度的操作,以减少不必要...

    jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    为了解决这一问题,我们可以采用JavaScript动态调整`iframe`的高度。具体步骤如下: 1. **定义函数`stateChangeIE()`**:此函数用于检查`iframe`是否已经加载完成(即其`readyState`属性是否为`"complete"`),如果...

    iframe自适应高度(兼容多种浏览器)

    2. **事件监听**:除了在页面加载完成后调用调整高度的方法外,还应该监听窗口的`resize`事件,以便在窗口大小改变时重新计算`iframe`的高度。 3. **错误处理**:在某些情况下,如`iframe`加载失败或内容为空时,...

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

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

Global site tag (gtag.js) - Google Analytics