Stop EFB from loading iframes on mobile

Hi, it is now possible to set a minimum screen width parameter on Settings > Media, in the Miscellaneous section. ??

Note: you can remove the theme customization.

But is there some script that would stop loading iframe content on mobile, but still allow images to be loaded on mobile?

Are you using links with class fancybox-iframe?

Try this in a Custom HTML widget in the footer or (if no footer widget zones) last in the sidebar:

<script type=”text/javascript”>
var pxRatio = window.devicePixelRatio || 1;
if( window.innerWidth/pxRatio < 420 ) {
 jQuery("a.fancybox-iframe").removeClass("fancybox-iframe");
};
</script>

Yes, I am using the fancybox-iframe class for iframes. I tried replacing:

function custom_page_script(){
echo ‘
<script type=”text/javascript”>
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 400 ) {
easy_fancybox_handler = null;
};
</script>
‘;
}

with

function custom_page_script(){
echo ‘
<script type=”text/javascript”>
var pxRatio = window.devicePixelRatio || 1;
if( window.innerWidth/pxRatio < 420 ) {
 jQuery("a.fancybox-iframe").removeClass("fancybox-iframe");
};
</script>
‘;
}

But the iframes then load on mobile.

• This reply was modified 4 years, 10 months ago by threeoten.

Can you share a link to your site?

https://www.quailsprings.org/about-us/our-team/ this page is an example of where I don’t want to the iframes to load on mobile. fancybox-iframe class is applied to the images and the read more links. But I still want images on other pages of the site to be able to load in EFB on mobile. This is why I want the the ‘don’t load on mobile’ to only apply to iframes.

Hmmm, two things:
1. There is a uncaught script error happening that might (but does not seem to) block other script execution:

Uncaught ReferenceError: NProgress is not defined
    at (index):68

2. I still see the “old” javascript in your page source:

<script type="text/javascript">var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 400 ) {
  easy_fancybox_handler = null;
};</script>

You may need to start with disabling all caching and script compression/concatenation…

The error is from my page loader plugin. I’ve temporarily disabled it.

The old JS is still there because the newer one allows iframes to load in EFB for front end users. I’ve temporarily added the new JS.

Hmmm, it might be the wrong quotes there (I copied the code example from the original post)… try replacing with this code:

<script type='text/javascript'>
var pxRatio = window.devicePixelRatio || 1;
if( window.innerWidth/pxRatio < 420 ) {
 jQuery('a.fancybox-iframe').removeClass('fancybox-iframe');
};
</script>

The theme editor gives errors with those quotes:

syntax error, unexpected ‘text’ (T_STRING), expecting ‘,’ or ‘;’
syntax error, unexpected ‘a’ (T_STRING), expecting ‘,’ or ‘;’
etc.

OK then try using " marks (that’s one double quote, not two single quotes) but not ” (hard to see the difference sometimes, depends on font type too)

• This reply was modified 4 years, 10 months ago by Rolf Allard van Hagen.

Ah! That was it! It’s working now, thanks much!!