Getting parent width from Iframe doesn't work in Chrome or Opera browsers

Question

I found a line of code here: parent.document.body.clientWidth How can I get a parent window's height from within iFrame using jQuery? that i use to find the width of the parent page from an iframe.

It works in Edge, IE 11, Firefox but not for Chrome or Opera.

Is there a fix or perhaps a different solution to the problem?

Example

IFrame

html

<body onresize="bodyRePr()">
    <script src="examplescript.js"></script>
    [...]
</body>

js

function bodyRePr(){
    if (parent.document.body.clientWidth > 720){
        document.getElementById("example").style.width = "460px";
    }
    else{
        document.getElementById("example").style.width = "100%";
    }
}

I see this error when opening the page in Opera, not sure what it means.

requested:

html is of another page including the iframe

<body onscroll="toggleMenu()" onload="startup()" onload="getBrowserInfo()" onresize="bodyRe()">
    [...]
    <nav id="profileMenu">
        <iframe id="profileMenuIframe"></iframe>
        <div onclick="closeProfileMenu()" class="closeBtn">&#9587;</div>
    </nav>
[...]
</body>

css

#profileMenu{
    z-index: 6;
    position: fixed; top: 0; left: 0;
    width: 500px; height: 100%;
    margin-left: -100%;
    background: rgb(30,30,30);
    transition: margin-left 0.2s;
}
#profileMenuIframe{
    width: 500px;
}

Possible duplicate of [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) — DavidDomain, Apr 25 '17 at 18:21
why would you want to know the parents size? why is that important? — Dayan Moreno Leon, Apr 25 '17 at 18:26
@DayanMorenoLeon i want to resize the iframe when the window is smaller than 700px. however i couldn't use ´@media´ in css since i was making the iframe wider at that point. — Jonathan Fogelström, Apr 25 '17 at 18:36
you can't do that on any respectable browser, it would be a security hazard. the best you can do is make sure your content is presented nicely regardless the size is being rendered in. — Dayan Moreno Leon, Apr 25 '17 at 22:35
Thanks @DavidDomain seems that's the problem i'm having, solution is a bit too advanced for me to understand quite yet. — Jonathan Fogelström, Apr 26 '17 at 17:12
@DayanMorenoLeon I think i might do just that in this case. thanks for all the answers :) — Jonathan Fogelström, Apr 26 '17 at 17:12

score 0 · Answer 1 · answered Apr 29 '18 at 04:15

You can't test frame/parent references offline in Chrome, using file:// URL's as shown in your example.

And you can't reference your online resources either, while testing offline, because that would be cross-site scripting.

To test your parent frame references, you either need to use a browser that supports offline URL's the same way it supports online URL's, or test both parent and frames using an HTTP server.

Getting parent width from Iframe doesn't work in Chrome or Opera browsers

1 Answers1