Question

我想创建一个从其他页面加载页面的iframe页面现场。我尝试了“jQuery iFrame Sizing”来设置自动高度 iframe ......但它失败了。

问题是什么......？

这是我的代码：

on Head:
<script type="text/javascript" src="js/jquery.js" ></ script >
<script type="text/javascript" src="js/iframe.js"></script >

on Body:
<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com"/>
</iframe>

Answer 1

是的，由于浏览器的安全限制，Javascript无法访问从另一个域加载的iframe源。然而，有一个解决方法，不是理想的，但它的工作原理。

您可以使用一个简单的本地脚本“智取”浏览器，该脚本将加载并输出mydomain.com的内容。然后将iframe src指向此脚本。在这种情况下，浏览器会认为您正在处理相同的域，并且限制将不适用。

所以不要这样：

<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com" />

您可以尝试这样的事情：

<iframe scrolling="no" frameborder="0" width="1025" src="/local-script.php?url=http%3A%2F%2Fmydomain.com" />

然后你可以在local-script.php中添加一个简单的逻辑来加载你想要的域/文档的内容，一切都应该没问题。 LMK，如果你需要一个PHP脚本的例子。

Answer 2

这是可能的，但不是直截了当的。我知道Shindig opensocial容器做了类似的事情。托管在iframe中的小工具可以请求容器动态调整iframe大小以响应iframe内小工具内容的更改。

处理此问题的代码位于dynamic-height.js和dynamic-height-util.js的shindig svn repo中。

希望你可以从那里提取可用的东西。

Answer 3

来自original site的前两行：

注意：由于浏览器安全性与跨站点相关的限制脚本，此解决方案仅适用 iframe页面内容从同一个域调用

Answer 4

可能有点晚了，因为所有其他答案都比较旧:-)但是......这是我的解决方案。在实际的FF，Chrome和Safari 5.0中进行了测试

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

希望这对任何人都有帮助。

Answer 5

好的我的解决方案是将iframe设置为其内容，考虑到您有交叉访问权限，或者如果没有，您可以在您的php文件中添加此标题：

header("Access-Control-Allow-Origin: *");

所以调整大小的JS代码就是这个：

function resizeFrame(f) {
     var size = f.contentWindow.frameElement.clientHeight;
     f.style.height = size + "px";              
     }

然后调用resizeFrame（id reference）

AutoHeight IFrame

5 个答案: