识别 iFrame 中的 CSS 方向答案

【问题标题】：Recognize CSS orientation in iFrame识别 iFrame 中的 CSS 方向
【发布时间】：2013-05-14 18:43:30
【问题描述】：

iframe 是否可以识别其父网站的方向？目前 css 媒体查询仅在我的父站点上工作。

我尝试通过向我的 iframe 发送帖子消息并使用 javascript 更改链接的 css 文件来解决此问题：

父站点：

window.addEventListener("orientationchange", function(){
  var iframe = document.getElementById("plan_iframe");
  iframe.contentWindow.postMessage({orientation: window.orientation}, iframe.src);
}, false)

iframe：

<link id="changing_css" rel="stylesheet" type="text/css" href=""/>

[...]

window.addEventListener("message", function(e){
  var newOrientationValue = e.data.orientation;
  if(newOrientationValue == 90 || newOrientationValue == -90){
    document.getElementById('changing_css').href="css/vertretung_ios_landscape.css";
  }
  else{
    document.getElementById('changing_css').href="css/vertretung_ios_portrait.css";
  }
}, false)

此修复非常慢，因为 javascript 需要一些时间来加载文件“onorientationchange”并应用更改。

css如何识别方向？

【问题讨论】：

我遇到了类似的问题。您找到任何解决方案了吗？我正在尝试从 iframe 的 CSS 中的媒体查询中检测设备方向。
由于我的网站是 iOS 优化网站，我将媒体查询更改为 @media screen and (min-width: 900px)。这是最快、最简单的解决方法。

标签： css iframe orientation message

【解决方案1】：

就我而言，我可以控制父窗口。我通过在父容器的 iFrame 样式上添加一个额外的媒体查询来解决这个问题。事实证明，用于方向的 CSS 媒体查询只是通过较大的属性进行。比如……

更高高度的 iFrame 将以纵向呈现。 width: 400px; height: 600px;

宽度较大的 iFrame 将以横向呈现。 width: 600px; height: 400px;

【讨论】：