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

Posted 2023-02-22

【中文标题】是否可以从内部更改 iframe 的宽度/高度

【英文标题】：is it possible to Change the width/height of an iframe from within

【发布时间】：2013-08-17 09:23:11

【问题描述】：

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

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

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

【问题讨论】：

我认为如果它们不在同一个域中，您会发现这很困难。更不用说这是不受欢迎的！

我认为你需要使用attr('width', '1000px')。但它只有在 iframe 属于同一个域时才有效。

@Neurofluxation 是的，我无法将我的应用程序更改为全屏模式

@jcubic 我也试过了！！它没有工作

别担心，这里有一个更成熟的答案：***.com/questions/5908676/…

【参考方案1】：

如果你控制两个页面，那么你可以使用 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');
);

【讨论】：

不，我无法控制它！有没有其他方法可以改变它？？感谢和 +1 的回答

【参考方案2】：

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

This page 解释了如何做到这一点：

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

【讨论】：

这种否定了问题的全部意义，即调整iframe的大小。

@Neurofluxation 但问题已经得到解答。那是“不”。因此，OP 将不得不寻找其他方法来实现他们想要的（即全屏显示应用程序）。将我的答案视为“B 计划”，或最后的努力。

我会放过你的 ;) 投票支持解释。道歉！！