How to position an element inside an iframe with respect to parent?

Question

I am working on a project where the content is loaded inside an iframe and the loader also present inside iframe, so when some action is performed the loader is positioned accoring to the height of iframe, but i want to show the loader based on the parent window, is there any way or hack to solve this problem.

This the css for the loader inside iframe .loaderIcon { position: fixed;top: 50%;left: 50%; } .loaderIcon { position: fixed;top: 50%;left: 50%; }

Answer 1

If the site within the iframe should be allowed to manipulate the content of the parent window, there are some workarounds, but as mentioned in the comments, it is not possible for elements from the iframes to be displayed relative at the parent window.

You can use window.parent from within the iframe and create/modify every element on the hosting site, but only if the iframe is following the same origin policy .

Based on the site http://example.com/ these would be allowed to modify the parent.

URL	SOP	Info
http://example.com/iframe.html	Yes	Same protocol, host and port
http://example.com/dir/inner.html	Yes	Same protocol, host and port
https://example.com/secure.html	No	Other protocol
http://example.com:81/dir/etc.html	No	Other port
http://subdomain.example.com/dir/other.html	No	Other host

If the iframe is loaded from a different origin, you can use window.parent.postMessage() to send custom events to the page hosting the iframe and capture the Message Event to handle it on the parent window and allow everything you want. MessageEvent Example