How to get the parent iframe size in the embedded page js code?

Question

I am writing a signage html page to be shown in full screen automatically. I use screen.width and .height to get the client's screen size. Now for the edit page which users can add/delete contents on the signage, I would like to let users preview the edited result without going to signage site in fullscreen. So I plan to have a iframe has the same ratio as the client screen and embedded the signage page into the iframe on the edit page.

The thing is how I can let the signage page change the size to fit in the iframe? Or how I can get the parent page's iframe from the embedded page? The screen.width and $(document).width seem to have the same result.

I use python GAE, webapp2,jinja2.

Answer 1

Within the embedded page you can retrieve the size of the iframe element in the parent page like this:

var width = window.frameElement.offsetWidth,
    height = window.frameElement.offsetHeight;