调整跨域iframe高度 [英] Resize Cross Domain Iframe Height

问题描述

我试图将iframe高度参数更改为在iframe中加载的页面的相同px。加载到iframe中的页面来自另一个域。

不同的页面将被加载到iframe中，从而导致iframe内容的高度发生变化。我需要抓取iframe内容高度并将其应用于iframe高度参数。

这里是一个关于即时通讯讨论的例子： http://jsfiddle.net/R7Yz9/3/

 < div class =site>< a href =http://amazon.com/target =_ top>亚马逊< / a>< / div> 
< div class =site>< a href =http://cnn.com/target =_ top> Cnn< / a>< / div> 
< div class =site>< a href =http://wikipedia.org/target =_ top> Wikipedia< / a>< / div> 
< iframe id =sourcesrc =http://amazon.com/frameborder =0scrolling =nowidth =100％height =100％>< / IFRAME> 
  

。

  $（document）.ready（function（）{
 var iframe = $（#source）; 
 $（a [target = _top]）.click（function ）{
 iframe.attr（src，this.href）; 
 return false; 
}）; 
}）; 
  

解决方案

这是一个小型库，可解决所有问题调整iFrames到他们的内容。

https： //github.com/davidjbradshaw/iframe-resizer

它通过使用post-message API来处理跨域问题，并检测到iFrame的内容有几种不同的方式。

适用于所有现代浏览器和IE8以上。

编辑：为了确定跨域iframe高度，您还必须有权在iframe页面上实施脚本。

I'm trying to change the iframe height parameter to the same px of the page being loaded within the iframe. The page that's being loaded in the iframe is coming from another domain.

Different pages will be loaded up inside of the iframe causing the height of the iframe content to change, So I will need to grab the iframe content height and apply it to the iframe height parameter.

Here a example of what im talking about: http://jsfiddle.net/R7Yz9/3/

<div class="site"><a href="http://amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

.

$(document).ready(function() {
    var iframe = $( "#source" );
    $( "a[target=_top]" ).click( function(){
        iframe.attr( "src", this.href );
        return false;
    }); 
});

解决方案

Here is a little library that solves all the problems with sizing iFrames to their contained content.

https://github.com/davidjbradshaw/iframe-resizer

It deals with the cross domain issue by using the post-message API, and also detects changes to the content of the iFrame in a few different ways.

Works in all modern browsers and IE8 upwards.

EDIT: In order for cross-domain iframe heights to be determined, you must also have access to implement a script on the iframe's page.

这篇关于调整跨域iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！