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

IFrame跨域高度自适应

    博客分类:
  • java
阅读更多

   项目网站中需要嵌入合作网站的页面,这就需要页面的自适应高度变化,并且是跨域的。在网上看了许多资料,加上自己的

 

实践,终于实现了跨域的IFrame自适应高度。如下:

 

 

首先,我的页面a.html需要引入对方的b.html,在这里运用iframe方式实现页面的套用

 

a.html页面的主要代码如下:

 

<BODY>
  <iframe width="100%" id="a_iframe" name="a_iframe" src="http://对方域名/b.html" 
    frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe>
</BODY>

a.html页面只是用来引入对方页面的一个简单页面 这就不多做介绍。

 

然后,最好在a.html同一级目录下,创建一个agent.html页面,该页面用来得到对方通过js传递过来的参数,

根据高度参数来调整a.html中的a_iframe的高度,主要代码如下:

 

<script type="text/javascript">
//得到a.html中的a_iframe
var a_iframe = parent.parent.document.getElementById("a_iframe");
//location.hash用来获取页面的标签值


,这个值通过b.html中的js函数改变。包括height属性
var hash_url = window.location.hash; 
//得到b.html传递过来的height属性
var hash_height = hash_url.split("#")[1]+"px";
//调整a_iframe的height,达到自适应 
a_iframe.height = hash_height;
</script>
 

最后,对方的页面(b.html),让对方在b.html中加入以下javascript代码

 

<iframe id="b_iframe"  width="100%"  src="http://我的域名/../agent.html" style="display:none">
</iframe> 
<script type="text/javascript">   
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);   
var b_iframe = document.getElementById("b_iframe");   
b_iframe.src =  b_frame.src+"#"+b_height;
</script>
 

通过 Math.max(clientHeight,scrollHeight)比较网页可见区域高,网页正文全文高这两者得到其中的较大的值后,

iframe将这个height通过src传递到我的agent.html,这样a.html中的Iframe就能自适应对方的b.html高度了。这里在IE下测试的没问题,其它浏览器没测试。

 

   在实现这个功能的过程中,在网上发现了一段很有用的获取页面高度的js,在这里也记录、引用下:

 

< script>   
  var   strInfo=" " ;  
  strInfo+=" \r\n网页可见区域宽:" +document.body.clientWidth;  
  strInfo+=" \r\n网页可见区域高:" +document.body.clientHeight;  
  strInfo+=" \r\n网页可见区域宽:" +document.body.offsetWidth+" (包括边线的宽)" ;  
  strInfo+=" \r\n网页可见区域高:" +document.body.offsetHeight+" (包括边线的宽)" ;  
  strInfo+=" \r\n网页正文全文宽:" +document.body.scrollWidth;  
  strInfo+=" \r\n网页正文全文高:" +document.body.scrollHeight;  
  strInfo+=" \r\n网页被卷去的高:" +document.body.scrollTop;  
  strInfo+=" \r\n网页被卷去的左:" +document.body.scrollLeft;  
  strInfo+=" \r\n网页正文部分上:" +window.screenTop;  
  strInfo+=" \r\n网页正文部分左:" +window.screenLeft;  
  strInfo+=" \r\n屏幕分辨率的高:" +window.screen.height;  
  strInfo+=" \r\n屏幕分辨率的宽:" +window.screen.width;  
  strInfo+=" \r\n屏幕可用工作区高度:" +window.screen.availHeight;  
  strInfo+=" \r\n屏幕可用工作区宽度:" +window.screen.availWidth;  
  window.confirm(strInfo);  
  < /script>
 

 

 

 

 

 

分享到:
评论

相关推荐

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

    标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...

    解决iframe跨域高度自适应问题的源码

    本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先,我们需要理解为什么会出现跨域问题。根据浏览器的同源策略,一个网页只能访问与之同源(即协议、域名和端口完全相同)的资源。而跨域则意味着iframe...

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    IFrame跨域高度自适应实现代码

    本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能访问与之同源(协议、域名、端口相同)的IFrame内容。但当...

    iframe跨域自适应高度模板

    总结来说,`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制,通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见,能帮助我们更灵活地整合...

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

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

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

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

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    2. `order_list.html`: 这个文件很可能被用作iframe的源,即被嵌入到index.html中的页面,可能包含了一些需要自适应高度的内容。 3. `jquery-1.7.2.min.js`: 这是jQuery库的版本1.7.2的压缩版,它是实现iframe高度...

    iframe 跨域 自动适应高度

    1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...

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

    Iframe框架高度自适应是一个重要的需求,特别是在内容动态更新或者跨域通信时,确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应,并分析给定代码的工作原理。 ...

    Iframe 高度自适应浏览器高度

    当Iframe加载跨域内容时,安全限制可能会影响高度的动态调整。在这种情况下,可以使用HTML5的`sandbox`属性,配合`allow-scripts`允许Iframe内的脚本运行,以便计算高度。 5. **设定定时器**: 有些情况下,内容...

    iframe高度自适应

    在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是,这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**: 对于跨域的`iframe`,可以采用...

    iframe自适应宽高

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

    如何设置iframe高度自适应在跨域情况下的可用方法

    总结来说,解决iframe跨域高度自适应问题的关键在于找到一种方式,无论子页面是否在同一域,都能让父页面获取到准确的高度信息。这可能需要结合JavaScript、HTML5特性、CSS布局或者服务器端的配合,具体选择哪种方法...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

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

    通过以上步骤,`iframe-resizer`库能够确保`iframe`始终根据其内容自适应高度,无论内容是否跨域。 总结来说,实现`iframe`根据页面内容自适应高度和宽度,可以通过CSS、JavaScript以及第三方库如`iframe-resizer`...

Global site tag (gtag.js) - Google Analytics