是否可以從內部更改iframe的寬度/高度

Question

我將在一個網站上托管我的應用程序。 該應用將顯示在其中的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');
});