从 iframe 中检测父网站的媒体屏幕大小答案

【问题标题】：Detecting media screen size of parent website from within iframe从 iframe 中检测父网站的媒体屏幕大小
【发布时间】：2017-05-16 10:18:24
【问题描述】：

我正在尝试根据父网站（呈现 iframe 的网站）更改托管在不同域上的 iframe 元素的设计。

我的具体目标是仅针对 iPhone 5（严格的 iPhone 5）更改 iframe 中的一些设计组件。截至目前，我通过传递$(window).width() 和$(window).height() 来获取宽度和高度，然后在加载 iframe 时将它们作为查询参数传递给 url。这样我就可以提前得到准确的宽度，并据此调整设计元素。

有没有更好的方法来做到这一点，我不知道，我仍然想知道我将如何准确定位 iPhone 5。

到目前为止，我在 iPhone 5 上使用它，但没有运气：

if (window.matchMedia("@media only screen and (min-device-width : 320px) and (max-device-width : 568px)").matches) {
  /* jQuery CSS alternations goes here!! */
}

注意：我通过 jQuery .css 属性在 iframe 中应用 css 属性。因此，检测应该只在基于宽度的 javascript 中进行，或者根据您的知识是最好的方法。

谢谢！

【问题讨论】：

你为什么不试试 userAgents。 navigator.userAget
@ShoaibKonnur 我刚刚看过，大部分例子都是检测浏览器。你能分享一个屏幕尺寸的例子吗？

标签： javascript html css iframe media-queries

【解决方案1】：

您可以使用window.screen.height 和window.screen.width 找到设备视口尺寸。它甚至可以在 iframe 中正常工作。

<iframe width="100" height="40" srcdoc="<script>
    document.writeln(window.screen.width,'x',window.screen.height)
    </script>">
</iframe>

【讨论】：

【解决方案2】：

对于 JavaScript，如果 iframe 的域与父域相同，则可以使用： parent.document.body.clientHeight 或 parent.document.body.clientWidth

如果您尝试通过 iframe 在不同的域中使用它，您将收到跨站点脚本错误，出于明显的安全原因。

如果 iframe 的域与父级的域不同，则需要使用 Window.postMessage()。

【讨论】：

我也可以访问提供数据的域，因此我已经处理了 CORS 问题。
在这种情况下，您可以使用 post 消息将数据从父级传输到 iframe，如下所示。