3

我想制作一个从其他网站加载页面的 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>
4

5 回答 5

4

是的，由于浏览器的安全限制，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 脚本示例。

于 2009-10-13T12:25:21.123 回答
1

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

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

希望你能从那里提取一些有用的东西。

于 2009-10-13T11:27:41.217 回答
0

原始站点的前两行：

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

于 2009-10-13T11:32:41.817 回答
0

可能有点晚了，因为所有其他答案都较旧:-) 但是......这是我的解决方案。在实际 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
        });
    });
});

希望这会帮助任何人。

于 2013-12-25T23:45:27.463 回答
0

好吧，我的解决方案是将 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)

于 2014-06-04T11:57:55.150 回答