简体   繁体   中英

Using iframe-resizer: iframe grows when I click inside iframe, also not functioning on mobile

I have installed iframe-resizer on my site ( http://www.healthfitchiro.com/alternate-login ) which is mostly working as intended except: 1) it does not appear to work at all on mobile, in any capacity. 2) When you click somewhere inside the iframe, the page grows in length. Each click causes it to grow further and it does not shrink back. Here is my page code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//healthfitcorpwell.com/wp-content/themes/healthfitcorpwell/js/iframeResizer.min.js"></script>
<style>#lcembed{width:100%}</style>
<script type="text/javascript">
document.write('<iframe id="lcembed" name="lcembed" src="https://www.healthfitcorpwell.com/lce/?url=' + document.location + '" scrolling="no" frameborder="0"></iframe>');
iFrameResize({log:true, checkOrigin:false, inPageLinks:true, sizeWidth:true});
</script>

My questions: why is the growing phenomenon happening? How do I get this to work when viewed on mobile? Since I will be navigating inside the iframe, do I need to include iframeResizer.contentWindow.min.js on every page that will be navigated to or just the first page that is loaded? Also, I guess this isn't critical but when I attempt to use the jQuery method it does not work: $('#lcembed').iFrameResize(); It will not resize and the iFrame height appears to only be a few pixels tall. Only iFrameResize(); by itself works functionally. Why is this happening?

The growing phenomenon is caused by a size mismatch between the iframe height and the iframe's body height. If you remove the min-height: 101%; from your body css it won't keep growing.

I couldn't reproduce the mobile malfunction, in Chrome on Android it looked the same as my desktop browser.

If you are navigating to other pages within the iframe, then yes you will need to include the content script in each page. It has to make a call to the parent frame, which cannot happen without the script.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM