識別iFrame中的CSS方向

iframe可以識別其父網站的方向嗎？目前，CSS媒體查詢只在我的父站點工作。識別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如何識別方向？

來源

2013-05-14 Felix Bernhard

我有類似的問題。你有沒有找到解決方案？我試圖從一個iframe的CSS中的媒體查詢中檢測設備方向。 – Ringen

由於我的網站是一個iOS優化網站，我將媒體查詢更改爲 '@media screen和（min-width：900px）'。這是最快和最簡單的解決方法。 –

在我的情況下，我控制了父窗口。我通過在父容器的iFrame樣式上添加額外的媒體查詢來解決此問題。事實證明，定向的CSS媒體查詢只是取決於哪個屬性更大。例如...

更高高度的iFrame將呈現縱向。 width: 400px; height: 600px;

更大寬度的iFrame將呈現橫向。 width: 600px; height: 400px;

來源

2016-04-20 19:17:23 Ant

識別iFrame中的CSS方向

回答

相關問題