2

I have an app that is loaded inside an iframe. The code looks something like this (sample):

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
    <iframe src="app_url_on_a_different_domain" height=100% width=100%>
        <html>
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
            </head>
            <body>...</body>
        </html>
    </iframe>
</body>
</html>

I am trying to get the viewport height from inside the iframe by doing the following (the iframe src is a different domain so I cannot access the parent container):

document.documentElement.clientHeight

This gives me the correct viewport on desktop browsers; however, on mobile safari/chrome, instead of getting the actual device height, I get the height of all the content inside the iframe. So instead of "460" on a iPhone 5, I get something like "3000".

How can I get the available viewport from inside this iframe?

Alex
  • 11,115
  • 12
  • 51
  • 64
Sahil
  • 489
  • 5
  • 8
  • [How to access parent Iframe from javascript](http://stackoverflow.com/questions/935127/how-to-access-parent-iframe-from-javascript) – Givi Jan 27 '14 at 22:50
  • The parent frame is on a different domain – Sahil Jan 27 '14 at 23:20
  • I found that screen.height from inside the iframe actually gives the correct height of the screen. For now I'm using this value minus 100 pixels (to account for the extra chrome that the mobile browser adds such as the address bar). This gives me the approximate viewport of the mobile browser -- although it's not perfect. Just thought I'd share what I ended up using. – Sahil Jan 30 '14 at 20:44

1 Answers1

0

All modern browsers do not allow to do this from different domain(ie different origin). This is the answer.

Why you think what must be an alternate route?

You can get info only from what origin where is your script. Because if you can get access for example to Screen object and any one else you can get the access to it prototype chain (via __proto__). By this chain you can get access to Object and redefine all getters and setters for all objects, for example. And control from iframe the parent page. And it will be fail, facepalm and etc.

It is naively to find the exit from room without door.

Alex
  • 11,115
  • 12
  • 51
  • 64
  • Yes I know you cannot run javascript on a different domain. The question is how to find the viewport height from an iframe that isn't on the same domain? There has to be an alternate route – Sahil Jan 27 '14 at 23:38
  • I think you are answering the wrong question. I am able to get the viewport on modern browsers with my method. But I am not able to do this on a mobile browser. – Sahil Jan 27 '14 at 23:40
  • 1
    Because desktop browser scale you iframe to 100% size of viewport and iOS Safari not. **But using document.documentElement.clientHeight you get the height of iframe viewport and nohow the parent page** – Alex Jan 27 '14 at 23:49
  • Thanks for your explanation and I understand the security implications. The reason I was hoping there would be an alternate route is because I am able to get the correct viewport on a desktop browser by checking the clientHeight of the iframe's body and am getting different results on a mobile browser. Your latest comment answers why I'm seeing different behavior. – Sahil Jan 27 '14 at 23:52