javascript - 是否可以从内部更改 iframe 的宽度/高度

Question

我将在一个站点中托管我的应用程序。该应用程序将显示在其中的 iframe 中。我需要我的应用程序全屏显示，无论如何我可以在哪里更改 iframe 的大小，该 iframe 将从我的应用程序中保存我的应用程序？我的应用程序和托管它的网站不是同一个域。

$("iframe", window.parent.document).css("width", "1000px");

这不起作用，因为站点和应用程序不属于同一域

Answer 1

如果您的应用程序需要全屏运行，最明智的方法是跳出 iframe。也就是说，检测您的页面是否在 iframe 中，如果是，则将浏览器重定向到您的页面，以便不再在 iframe 中！

此页面说明了如何执行此操作：

<script type="text/javascript">
    if (top.location!= self.location) {
        top.location = self.location.href;
    }
</script>

Answer 2

如果您控制两个页面，则可以使用 HTML5 Post 消息：

外部：

$(window).bind("message", function(e) {
    $('iframe').attr({
        width: e.originalEvent.data.width,
        height: e.originalEvent.data.height
    });
});

里面：

$('button').click(function() {
    parent.postMessage({width: '200px', height: '200px'}, 'http://localhost');
});