davidjbradshaw / iframe-resizer

Keep iFrames sized to their content.
https://iframe-resizer.com
Other
6.63k stars 978 forks source link

iFrame with dynamic blog posts nested in toggles not resizing in mobile phones. #1231

Closed jerrell-rebel closed 3 months ago

jerrell-rebel commented 3 months ago

Firstly, great work on the resizer! Works well on desktop. Just one small issue, when I test it on my mobile, it does not resize the iFrame. Half of the content just sinks, it does not calculate the dynamic height too. Here's the page for reference - thebreeze.com.au/who-we-work-with/

Nothing too special on how it is called. Just the regular CSS (iframe {width: 1px;min-width: 100%;}) script code (iFrameResize({ log: true }, '#myIframe');). I have also tried and experimented the different values from heightCalculationMethod.

resizer version is v4.3.9

Please let me know if you need more info! Thanks :)

davidjbradshaw commented 3 months ago

Check the console output, I'm seeing error 403 in the iframe when it tries to load the js file.

jerrell-rebel commented 3 months ago

There might have been a hiccup but I don't see the 403 error on my console on my end now.

It's also worth mentioning I've set the warningTimeout to 20000.

davidjbradshaw commented 3 months ago
Screenshot 2024-04-18 at 15 57 42
davidjbradshaw commented 3 months ago
Screenshot 2024-04-18 at 16 09 47
davidjbradshaw commented 3 months ago

https://rebelagency.com.au/wp-admin/js/iframeResizer.contentWindow.min.js

jerrell-rebel commented 3 months ago

You're right! I didn't notice because my IP was whitelisted in my .htaccess file. For others experiencing the same error, here's how I managed to allow access without compromising the security/permissions of my other files.

  1. You can try to adjust the file's permission first to 7/5/5 - ultimately allowing/ticking everything on the Execute row. image

  2. If that still does not work, you might have an .htaccess file nested on your /wp-admin folder. Put on this code -

    <Files "iframeResizer.contentWindow.min.js">
    Allow From All
    </Files>
    #iFrame Resizer allow execution/permission

Again, thank you David for this awesome library! 🤘

davidjbradshaw commented 3 months ago

Glad it works now. Could I ask a small favour, I'm currently updating the docs and I would love to add a small guide on how to use iframe-resizer with WordPress, but I've never used it. I was wondering, if you could detail how you set it up, so I could include it and help everyone else.

davidjbradshaw commented 3 months ago

I would have expected 644 to be ok for the permission, as it does not run on the server.

jerrell-rebel commented 3 months ago

Sure thing! In my case, we use a theme builder and a cpanel hosting with some custom security blocks to only allow certain IP's to access files.

I uploaded the files to the /wp-admin/js path and put on the htaccess code above.

On the iframe host, I called the iframeResizer.contentWindow.min.js file using a plugin called "Header Footer Code Manager (HFCM)" and on the iFrame caller, I just pasted this code and everything works right off the bat.

Everything just seems to be very similar with a non-wordpress website. Please let me know if there's anything else you need to know. Thanks again!


  iframe {
    width: 1px;
    min-width: 100%;
  }
/*@media only screen and (max-width: 767px) {
    iframe {
      min-height: 500px !important;
    }
  }*/
</style>

<script src="https://domain.com/wp-admin/js/iframeResizer.min.js"></script>

<iframe id="myIframe" src="domain.com"></iframe>

<script>
  // Initialize iframe resizer
  iFrameResize({ log: true }, '#myIframe');
</script>```
davidjbradshaw commented 3 months ago

Thank you, I've just put a page together on the draft website for Version 5. https://iframe-resizer.com/frameworks/wordpress/