`

设置有iframe的页面根据窗口大小自动调整大小

 
阅读更多
有时页面会出现莫名的不能占满页面的情况
window.onload=function(){
	    var height=document.documentElement.clientHeight;
	    document.getElementById('left_area_id').style.height=height-2+"px";
	    document.getElementById('right_area_id').style.width=document.documentElement.clientWidth-266+"px";
	    document.getElementById('right_area_id').style.height=height-2+"px";//parentFrame
	     document.getElementById('parentFrame').style.height=height-2+"px";
	    window.onresize=function(){
	    	document.getElementById('right_area_id').style.width=document.documentElement.clientWidth-266+"px";
	    }
}

也要同时设置iframe的大小
分享到:
评论

相关推荐

    iframe自适应宽高

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

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

    在网页开发中,`iframe`(Inline Frame)是一种非常有用的元素,它允许我们在一个页面中嵌入另一个页面的内容。然而,`iframe`的高度自动适应往往成为开发者面临的问题,特别是当嵌入的内容高度不确定时。标题提到的...

    iframe高度自适应.pdf

    在默认情况下,`iframe`的高度是固定的,这意味着当嵌入的内容高度发生变化时,`iframe`不会自动调整其高度。这可能会导致内容溢出或出现滚动条的情况,从而影响用户体验。因此,实现`iframe`的高度自适应变得尤为...

    iframe-resizer:在页面链接,嵌套和多个iFrame中,支持大小相同的跨域iFrame,并支持窗口内容大小调整

    iFrame Resizer V4 通过该库,可以自动调整... 检测可能导致页面调整大小的事件(“窗口调整大小”,“ CSS动画和过渡”,“方向改变”和“鼠标”事件)。 通过在iFrame和主机页面之间简化了消息传递。 修复了iFrame中

    JAVASCRIPT让IFRAME框架的高度自适应

    在窗口大小调整时,我们也需要调用handleFrameLoad函数来重新设置IFRAME框架的高度,以确保IFRAME框架的高度能够自动调整以适应窗口的大小变化。 在IFRAME框架中,我们可以使用table元素来控制IFRAME框架的高度。在...

    iframe自适应高度和宽度

    然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...

    iframe父页面与子页面通信及相互调用方法

    - 使用`iframeResizer`等插件可以自动调整`iframe`的大小,避免因内容变化导致的布局闪烁。 8. **总结** `iframe`通信涉及多个方面,包括同源策略、跨域通信、DOM操作和事件监听。理解并熟练掌握这些技巧对于开发...

    iframe for flex!

    这在响应式设计中非常有用,因为页面布局可以根据窗口大小自动调整。 2. **多窗口布局**:在一个`flex`容器中放置多个`iframe`,可以创建多窗口的效果,每个`iframe`展示不同的内容,如一个`iframe`用于展示新闻,...

    IFRAME自适应

    "IFRAME自适应"是针对不同设备和屏幕尺寸,确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中,IFRAME自适应尤其重要,因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...

    跨域控制iframe高度

    它们通常使用`postMessage`,并在iframe内部检测内容变化,自动调整高度。 3. **服务器端配合**:如果能够控制iframe加载的页面,可以在服务器端添加一个特殊的查询参数,比如`height`,并根据这个参数返回动态调整...

    iframe-resizer-react:Iframe-Resizer的官方React界面

    检测可能导致页面调整大小的事件(“窗口调整大小”,“ CSS动画和过渡”,“方向改变”和“鼠标”事件)。 通过简化了iFrame和主机页面之间的消息传递。 修复了iFrame中的页面链接,并支持iFrame和父页面之间的...

    前端项目-iframe-resizer.zip

    `iframe-resizer`是一个专门为解决这个问题而设计的开源库,它能够自动调整`iframe`的大小,确保`iframe`内容始终适应其容器,无论内容是同源还是跨域。 `iframe-resizer`项目的核心功能在于提供一种动态调整`...

    Iframe框架高度自适应的实现.doc

    为了确保Iframe在页面加载完成后自动调整大小,代码还使用了`attachEvent`(IE)和`addEventListener`(非IE)事件监听器。这样,无论使用哪种浏览器,只要页面加载完成,`iframeAutoFit`函数都会被调用,从而自动...

    Iframe 高度自适应浏览器高度

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

    测试iframe全

    在这个"测试iframe全"的场景中,可能包括创建不同类型的`iframe`测试,比如跨域加载、沙盒测试、动态调整大小、安全设置验证等,以全面掌握`iframe`的使用。同时,文件列表中的"helloworld"可能是测试项目的一个起点...

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

    然而,`iframe`的默认行为并不自动调整其高度以适应内容,这就可能导致内容溢出或者滚动条的出现,影响用户体验。为了解决这个问题,我们可以利用jQuery的动态计算和事件监听功能。 以下是一个基本的jQuery实现`...

    自动设置iframe大小的jQuery代码

    在很多场景下,我们需要根据父页面的大小动态调整iframe的尺寸,以保持页面布局的一致性和用户体验的流畅性。本文将探讨如何使用jQuery实现iframe宽度的自动设置。 首先,我们来看一下iframe标签的基本属性。通常在...

    Iframe交互语法

    默认情况下,Iframe会显示完整的嵌入内容,可能会根据内容自动调整大小。如果希望固定大小,可以设置`scrolling`属性为`no`来禁用滚动条,但请注意这可能导致内容无法完全展示。 ### 二、Iframe的属性 1. **src**...

    html iframe

    5. **尺寸自适应**:为了使`iframe`内容自动适应容器大小,可以使用JavaScript监听窗口或容器的尺寸变化,并相应地调整`iframe`的宽高。 6. **隐私问题**:`iframe`可能会被用于跟踪用户行为,因此一些浏览器和扩展...

    Iframe框架自动适应高度示例详解.pdf

    在一些特殊情况下,我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容,尽管通过OCR扫描技术出现了一些识别错误,但是核心的代码和思路是清晰的,能够帮助我们理解如何实现Iframe高度的自适应。 从...

Global site tag (gtag.js) - Google Analytics