CODEWITHSUNDEEP
javascripthtmlcssiframemedia-queries
Shashi
Shashi

Reputation: 474

Detecting media screen size of parent website from within iframe

I am trying to change the design of iframe elements that is being hosted on different domain, based on the parent website (the site rendering the iframe).

My specific goal is to change some design components within the iframe for iPhone 5 only (strict iPhone 5). As of now I am getting the width and height by passing the $(window).width() and $(window).height() and then passing them as query params in url while loading the iframe. This way I get the exact width in advance and adjust the design elements as per that.

Is there any better way to do this that I am not aware of and I am still to find out how exactly I would target iPhone 5.

I am using this so far for iPhone 5 but no luck:

if (window.matchMedia("@media only screen and (min-device-width : 320px) and (max-device-width : 568px)").matches) {
  /* jQuery CSS alternations goes here!! */
}

NOTE: I and applying css properties within iframe via jQuery .css property. So detection should only be in javascript based on width or whatever is the best way as per your knowledge.

Thanks!

Upvotes: 2

Views: 5314

Answers (2)

Ay Mon
Ay Mon

Reputation: 21

You can find the device viewport dimensions by using window.screen.height and window.screen.width. It works correctly even from an iframe.

<iframe width="100" height="40" srcdoc="<script>
    document.writeln(window.screen.width,'x',window.screen.height)
    </script>">
</iframe>

Upvotes: 1

Halaster
Halaster

Reputation: 1502

For JavaScript, if the domain of the iframe is the same as the parent's domain, you can use: parent.document.body.clientHeight or parent.document.body.clientWidth

If you attempt to use that via an iframe in a different domain you will get a cross-site scripting error, for obvious security reasons.

If the iframe's domain is not the same as the parent's you need to use Window.postMessage().

Upvotes: 3

Related Questions