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

问题描述

我正在尝试将 iframe 高度参数更改为与在 iframe 中加载的页面相同的像素.正在 iframe 中加载的页面来自另一个域.

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

这是我在谈论的一个例子:http://jsfiddle.net/R7Yz9/3/

亚马逊</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">维基百科</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 );返回假；});});

解决方案

只有当您有权在两个域上实现 JS 时，才可以跨域执行此操作.如果你有这个，那么这里有一个小库，它解决了将 iFrame 调整为包含的内容的所有问题.

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

它通过使用 post-message API 处理跨域问题，并以几种不同的方式检测 iFrame 内容的变化.

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

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;
    }); 
});

解决方案

It is only possible to do this cross domain if you have access to implement JS on both domains. If you have that, then 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.

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