//设置iframe的高度 function mainiframeResize(id){ var browerHeight = fnGetWidthHeight(); //通过ID得到iframe var iframe = document.getElementById(id); //得到iframe的自适应高度 var iframeHeight = iframe.contentWindow.document.documentElement.scrollHeight; alert("iframe的自适应高度iframeHeight = " + iframeHeight); //设置iframe的高度 if(browerHeight>iframeHeight){ iframe.height = browerHeight-32; }else{ iframe.height = browerHeight-32; } } //得的页面高度(窗口的内部高度) function fnGetWidthHeight() { var viewportheight; // 支持(mozilla/netscape/opera/chrome/IE7) if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } // 支持(IE6) else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight; } // 支持其他浏览器 else { viewportheight = document.getElementsByTagName('body')[0].clientHeight; } return viewportheight; }
相关推荐
3. 当`iframe`加载完成时,通过`contentWindow`和`contentDocument`属性访问`iframe`内部的窗口和文档对象。 4. 获取`iframe`内容区域的高度,如`contentDocument.body.scrollHeight`或`contentDocument....
### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...
// 设置iframe高度 }); ``` Iframe页面: ```javascript window.parent.postMessage(window.document.body.scrollHeight, 'http://parent-origin.com'); // 发送高度信息 ``` 2. **IFrame自适应高度的...
使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置给`iframe`元素的`...
### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...
这段代码首先获取了`iframe`元素,然后通过`contentDocument`或`contentWindow.document`获取内部文档,最后利用`scrollHeight`属性获取了文档的总高度,这通常就是子页面的实际高度。 然而,在Internet Explorer中...
要实现`iframe`自适应高度,关键在于获取`iframe`内部文档的实际高度,并将其设置为`iframe`自身的高度。由于不同浏览器对`iframe`的支持存在差异,因此需要采取一种跨浏览器的兼容性方案。 ##### 2.1 获取内部文档...
这段代码会在窗口大小改变时,使`iframe`的高度适应其内部内容的高度。 总结,理解和掌握`iframe`的跨域解决方案以及自适应策略,对于开发高效且用户体验良好的Web应用至关重要。在实际应用中,还需要注意安全性、...
这段代码首先获取了Iframe元素,然后在其内容加载完成后,通过`contentWindow.document`访问到Iframe内部的文档对象,最后将内容的实际高度赋值给Iframe的`height`属性。 2. CSS Flexbox或Grid布局: 如果浏览器...
当`iframe`加载完成时,该脚本会获取`iframe`的内容窗口(contentWindow)和内容文档(contentDocument),并通过`contentDocument`的`body`或`documentElement`(对于HTML文档)的尺寸信息来计算`iframe`的新高度。...
在这种情况下,我们无法直接获取`iframe`内的内容或设置其属性,包括高度。这就需要我们找到一种方式来解决`iframe`跨域的高度自适应问题。 标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的...
例如,可以监听窗口的resize事件,并通过`contentWindow.document.body.scrollHeight`获取到Iframe内的页面高度,然后设置Iframe的高度为这个值。 3. **浏览器兼容性**: - IE和Firefox对于Iframe的处理方式略有...
在这个示例中,我们首先在`$(document).ready`函数中定义了一个`resizeIframe`方法,它会获取`iframe`的`contentWindow`和`contentDocument`,然后计算其内部`body`元素的高度,并设置为`iframe`的高度。这样,无论`...
通过访问`contentWindow`和`document`属性,我们可以得到Iframe内部页面的文档对象,进而获取到内容区域的实际高度。最后,我们将这个高度赋值给Iframe的`style.height`,从而实现自适应高度。 然而,需要注意的是...
一种常见的做法是,在`iframe`加载完成后获取其内容区域的高度,并将其设置为`iframe`的高度。例如,使用jQuery可以这样写: ```javascript $(document).ready(function() { $('iframe').load(function() { ...
1. **IFRAME的基本使用**:首先,你需要在HTML文档中创建IFRAME元素,设置`src`属性指向要加载的页面,并可以调整其宽度和高度。例如: ```html <iframe id="frame1" src="page1....
4. **`contentWindow`对象**:表示`iframe`内的窗口对象,通过它可以访问`iframe`内部的文档。 5. **`document.body.scrollHeight`与`document.documentElement.scrollHeight`**: - `document.body.scrollHeight`...