3

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

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

父站点：

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

框架：

<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如何识别方向？

4

1 回答 1

1

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

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

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

于 2016-04-20T19:17:23.927 回答