Question

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

我的具体目标是仅在iPhone 5的iframe中更改一些设计组件（严格的iPhone 5）。截至目前，我通过传递$(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或任何最佳方式。

谢谢！

Answer 1

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

如果您尝试通过其他域中的iframe使用该错误，则会出于明显的安全原因而出现跨站点脚本错误。

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

Answer 2

您可以使用 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>

从iframe内

2 个答案: