Recognize CSS orientation in iFrame -


is possible iframe can recognize orientation of parent website? @ moment css media query working @ parent site.

i tried fix issue sending post message iframe , change linked css file javascript:

parent site:

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) 

this fix slow because javascript needs time load file "onorientationchange" , apply changes.

how css recognizes orientation?

in case, had control on parent window. solved putting additional media query on parent container's iframe styles. turns out css media query orientation goes whichever property greater. example...

an iframe of greater height render in portrait orientation. width: 400px; height: 600px;

an iframe of greater width render in landscape orientation. width: 600px; height: 400px;


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -