How to force responsive iframe target to respect viewport of iframe and behave responsively as if it were being accessed directly?

Question

The following site is fully responsive when accessed directly:

However, when accessed through an iframe, its responsiveness misbehaves and does not conform to the width of the browser:

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://prosolutionplus.com/">
   </iframe>
</div>

https://jsfiddle.net/g2eupd80/

I've tried every iframe responsive solution I could find (including the one above that actually works with other responsive sites), but nothing worked on this particular site. I noticed that when accessed via an iframe, the target site is setting a width of 1093px, but it does not do that when accessed directly and is then resized, so that's probably why the different solutions I've tried are not working. In other words, the target site is behaving differently depending on whether it is being accessed by the browser directly or via an iframe.

For it to be doing that, the target site is obviously detecting something differently when accessed via an iframe than it does when accessed directly, I just don't know what that is.

How can I fix this so that the iframe is treated just like a browser so that the target site behaves responsively within the iframe?

Compare the above JSFiddle example which is responsive when accessed directly but NOT when accessed via an iframe, to the example below which is responsive when accessed both directly and via an iframe. The only difference in the code is the URL.

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://www.vigrxplus.com/">
   </iframe>
</div>

https://jsfiddle.net/phL2nt34/

score 2 · Accepted Answer · answered Jan 14 '20 at 17:31

2

This is a CORS issue on prosolutionplus.com. If you open up the site in its own small tab, and turn JavaScript Off, you'll notice it sets the same 1093px, and behaves like it does when being iframed.

If you open up the JavaScript console while iframing prosolutionplus.com, you'll notice a CORS error pops up, stating:

frontend.min.js?ver=2.4.5.1:5 Uncaught DOMException: Blocked a frame with origin "https://www.prosolutionplus.com" from accessing a cross-origin frame.`

Looks like this issue is caused by the Thrive Editor. Also, here's a quick SO read on Cross-Origin and why it's blocked: SecurityError: Blocked a frame with origin from accessing a cross-origin frame

answered Jan 14 '20 at 17:31

Xhynk

12,250
8
29
61

Thank you for identifying the cause. How can I fix this issue? – ProgrammerGirl Jan 14 '20 at 17:48
1

You'll need to bring this up with the Thrive developers. The issue is in the `frontend.min.js` file, when unminified it's on line 1113-1115, the `windowWidth` function. It's trying to reference the parent window which isn't always on the same domain (You'll note that it *does* work if you iframe it in the prosolutions site through Dev Tools: [Example](https://i.imgur.com/LHG7cYX.png).). Alternatively if you manage the site, you could edit the JS file yourself, but it will get overwritten each time the Thrive plugin is updated. – Xhynk Jan 14 '20 at 18:01
If you manage the site, you could actually also [`dequeue`](https://developer.wordpress.org/reference/functions/wp_dequeue_script/) that script, and [`enqueue`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) a modified copy of it - that will prevent issues from updates - unless the rest of the plugin gets updated and requires updates in that file, hence why it's best to probably reach out to the Thrive devs and see if they can update it to modify that function to check for cross-origin frames. – Xhynk Jan 14 '20 at 18:04
I think it will be very unlikely that I will be able to get anyone to actually fix this issue on their end, so what's the best way for me to work around it on my end to get as close as possible to a responsive iframe? I tried playing around with CSS transform scales, negative margins, etc and got somewhat close to making the site look somewhat decent inside an iframe, but it was not very consistent when changing the width of the window. Perhaps some dynamic scaling with Javascript to modify the scaling based on the width of the screen would work better. What solution and code do you propose? – ProgrammerGirl Jan 14 '20 at 18:41
Honestly, there's not a ton you can do to **reliably** manipulate iframed content. It's been made harder and harder over the years by CORS policy and browser security updates. If you're using WordPress, I actually wrote a plugin that's designed to embed landing pages on your site in a full-screen format called [Content Mask](https://wordpress.org/plugins/content-mask/). It too has the same issues with the iframe, but if you use the download method, it works. Links of course still link to the parent site by default. [Example](https://xhynk.com/content-mask/pro-solution-test/) – Xhynk Jan 14 '20 at 19:00

How to force responsive iframe target to respect viewport of iframe and behave responsively as if it were being accessed directly?

1 Answers1