StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIFrame Popup "Window", Show & Hide, Cross Domain
text
Body
copied!<p>I have a web page, designed as a popup window that must be hosted by many external web sites. When the user clicks on a button in the hosting web page, the button should cause my iFrame to display. The user then interacts with my iFrame'd page to complete a specific task and eventually clicks the "close" button within my page and the frame becomes hidden again. However, because the two documents reside in different domains (and must do so), I am running up against browser security restrictions. </p> <p>My hosting page can't manipulate CSS within the hosted iFrame to change it to <code>display:block</code>, though it can so manipulate the frame itself. And the hosted iFrame can't "reach up" to the iFrame element to manipulate <em>its</em> CSS to change the iFrame <code>display</code> to/from block/hide.</p> <p>I can't see a way forward to having a button in the <em>hosting</em> document show the iFrame and/or its contents while at the same time having a button in the <em>hosted</em> document be able to manipulate the same element to hide the iFrame and/or its contents.</p> <p>Open to any creative solutions as long as it doesn't require a third-party JS library, since we have little to no control over the <em>hosting</em> sites and want to impose as little as possible on them - ideally, we supply a tiny snippet of HTML which they embed in their page to use our interactive service.</p> <p>Also, and as something of an aside, when I show the iFrame itself from the hosting document, the entire display is replaced by the iFrame instead of the iFrame overlaying it with the hosting document still visible behind it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload