javascript - 使用 iframe-resizer : iframe grows when I click inside iframe, 在移动设备上也不起作用

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 主体高度之间的尺寸不匹配造成的。如果您从 body css 中删除 min-height: 101%; ，它就不会继续增长。

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

如果您要导航到 iframe 中的其他页面，那么您将需要在每个页面中包含内容脚本。它必须调用父框架，如果没有脚本，这是不可能发生的。