iFrame의 CSS 방향 인식

iframe에서 상위 웹 사이트의 방향을 인식 할 수 있습니까? 현재 CSS 미디어 쿼리는 상위 사이트에서만 작동합니다.iFrame의 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)

은 내 iframe 대응에 포스트 메시지를 보내이 문제를 해결하고 자바 스크립트로 링크 된 CSS 파일을 변경하려 javascript가 "onorientationchange"파일을로드하고 변경 사항을 적용해야하기 때문에이 수정은 매우 느립니다.

CSS는 방향을 어떻게 인식합니까?

출처

2013-05-14 Felix Bernhard

비슷한 문제가 있습니다. 어떤 해결책을 찾았습니까? iframe에 대한 CSS의 미디어 쿼리에서 장치 방향을 감지하려고합니다. – Ringen

내 웹 사이트가 iOS에 최적화 된 웹 사이트이므로 미디어 쿼리가 '@media 화면 및 (최소 너비 : 900px)'으로 변경되었습니다. 이것은 가장 빠르고 쉬운 해결 방법입니다. –

제 경우에는 부모 창을 제어했습니다. 부모 컨테이너의 iFrame 스타일에 미디어 쿼리를 추가하여이 문제를 해결했습니다. 방향에 대한 CSS 미디어 쿼리가 단순히 더 큰 속성으로 이동한다는 것을 알았습니다. 예를 들어 ...

높이가 더 큰 iFrame은 세로 방향으로 렌더링됩니다. width: 400px; height: 600px;

더 큰 너비의 iFrame은 가로 방향으로 렌더링됩니다. width: 600px; height: 400px;

출처

2016-04-20 19:17:23 Ant

iFrame의 CSS 방향 인식

답변

관련 문제