`
退役的龙弟弟
  • 浏览: 453773 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

设置Iframe的高度-获取窗口内部高度

 
阅读更多
//设置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;
	}

 

分享到:
评论

相关推荐

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

    3. 当`iframe`加载完成时,通过`contentWindow`和`contentDocument`属性访问`iframe`内部的窗口和文档对象。 4. 获取`iframe`内容区域的高度,如`contentDocument.body.scrollHeight`或`contentDocument....

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...

    跨域控制iframe高度

    // 设置iframe高度 }); ``` Iframe页面: ```javascript window.parent.postMessage(window.document.body.scrollHeight, 'http://parent-origin.com'); // 发送高度信息 ``` 2. **IFrame自适应高度的...

    iframe自适应高度和宽度

    使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置给`iframe`元素的`...

    iframe高度自适应

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

    获取iframe子网页的Height

    这段代码首先获取了`iframe`元素,然后通过`contentDocument`或`contentWindow.document`获取内部文档,最后利用`scrollHeight`属性获取了文档的总高度,这通常就是子页面的实际高度。 然而,在Internet Explorer中...

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

    要实现`iframe`自适应高度,关键在于获取`iframe`内部文档的实际高度,并将其设置为`iframe`自身的高度。由于不同浏览器对`iframe`的支持存在差异,因此需要采取一种跨浏览器的兼容性方案。 ##### 2.1 获取内部文档...

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

    这段代码会在窗口大小改变时,使`iframe`的高度适应其内部内容的高度。 总结,理解和掌握`iframe`的跨域解决方案以及自适应策略,对于开发高效且用户体验良好的Web应用至关重要。在实际应用中,还需要注意安全性、...

    网页制作中Iframe自适应高度的解决办法

    这段代码首先获取了Iframe元素,然后在其内容加载完成后,通过`contentWindow.document`访问到Iframe内部的文档对象,最后将内容的实际高度赋值给Iframe的`height`属性。 2. CSS Flexbox或Grid布局: 如果浏览器...

    前端项目-set-iframe-height.zip

    当`iframe`加载完成时,该脚本会获取`iframe`的内容窗口(contentWindow)和内容文档(contentDocument),并通过`contentDocument`的`body`或`documentElement`(对于HTML文档)的尺寸信息来计算`iframe`的新高度。...

    iframe跨域高度自适应例子源码

    在这种情况下,我们无法直接获取`iframe`内的内容或设置其属性,包括高度。这就需要我们找到一种方式来解决`iframe`跨域的高度自适应问题。 标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的...

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    例如,可以监听窗口的resize事件,并通过`contentWindow.document.body.scrollHeight`获取到Iframe内的页面高度,然后设置Iframe的高度为这个值。 3. **浏览器兼容性**: - IE和Firefox对于Iframe的处理方式略有...

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

    在这个示例中,我们首先在`$(document).ready`函数中定义了一个`resizeIframe`方法,它会获取`iframe`的`contentWindow`和`contentDocument`,然后计算其内部`body`元素的高度,并设置为`iframe`的高度。这样,无论`...

    Iframe 框架自适应被嵌入页面高度

    通过访问`contentWindow`和`document`属性,我们可以得到Iframe内部页面的文档对象,进而获取到内容区域的实际高度。最后,我们将这个高度赋值给Iframe的`style.height`,从而实现自适应高度。 然而,需要注意的是...

    iframe 自适应高度

    一种常见的做法是,在`iframe`加载完成后获取其内容区域的高度,并将其设置为`iframe`的高度。例如,使用jQuery可以这样写: ```javascript $(document).ready(function() { $('iframe').load(function() { ...

    javascript经典特效---IFRAME间链接变换.rar

    1. **IFRAME的基本使用**:首先,你需要在HTML文档中创建IFRAME元素,设置`src`属性指向要加载的页面,并可以调整其宽度和高度。例如: ```html <iframe id="frame1" src="page1....

    iframe自适应高度

    4. **`contentWindow`对象**:表示`iframe`内的窗口对象,通过它可以访问`iframe`内部的文档。 5. **`document.body.scrollHeight`与`document.documentElement.scrollHeight`**: - `document.body.scrollHeight`...

Global site tag (gtag.js) - Google Analytics