Question

我已经在我的网站上安装了iframe-resizer（http://www.healthfitchiro.com/alternate-login），这主要是按照预期的方式工作，除了：1）它似乎在移动设备上无论如何都无法正常工作。 2）当您单击iframe内的某个位置时，页面的长度会增加。每次单击都会使其进一步增长，并且不会缩回。这是我的页面代码：

<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>

我的问题：为什么会出现这种日益增长的现象？如何在移动设备上查看此功能？由于我将在iframe中导航，我是否需要在每个要导航到的页面上包含iframeResizer.contentWindow.min.js，或者只包含加载的第一页？另外，我想这并不重要，但是当我尝试使用jQuery方法时，它不起作用：$('#lcembed').iFrameResize(); 它不会调整大小，iFrame高度似乎只有几个像素高。只有iFrameResize();本身才能正常运行。为什么会这样？

Answer 1

增长现象是由iframe高度与iframe体高之间的尺寸不匹配引起的。如果你从身体css中移除min-height: 101%;，它就不会继续增长。

我无法重现移动设备故障，在Android上的Chrome浏览器中，它看起来与我的桌面浏览器相同。

如果您要导航到iframe中的其他页面，则是，您需要在每个页面中包含内容脚本。它必须调用父框架，没有脚本就不会发生这种情况。

使用iframe-resizer：当我点击iframe内部时，iframe会增长，也无法在移动设备上运行

1 个答案: