IFrame调整器没有调整大小
IFrame Resizer not resizing
我正在做这个页面:http://factor1hosting.com/~dnaz/wordpress/certifications/
我正在尝试拉入一个跨域iframe。
我使用@DavidJBradshaw的iFrame Resizer来实现这一点。然而,我没有得到框架正确工作。
我可以只使用普通的javascript init:
<script>iFrameResize({log:true})</script>
当我使用这个,我得到的日志,但它不调整大小。我也尝试过jQuery方法:
$('iframe').iFrameResize( [{log: true}] );
不要让日志或iframe调整大小。我也试着把它包装在一个文档准备,这也没有实现它。
谁有任何想法或想法,为什么这不是正确的射击?我的控制台没有抛出任何JS错误……谢谢!
编辑:这是我目前如何在HTML方面设置的一个例子。
<iframe src="http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login" width="100%" scrolling="no"></iframe>
<script>
jQuery(document).ready(function () {
jQuery('iframe').iFrameResize( [{log:true}] );
});
</script>
编辑2 :这是我的控制台日志,当它触发时,它将iframe设置为150px,即使内容扩展到150px。
[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 (http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login)
iframeResizer.js:97
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
iframeResizer.js:97
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.js:97
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Enable public methods
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Added event listener: Animation Start
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Added event listener: Animation Iteration
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Added event listener: Animation End
iframeResizer.contentWindow.js:62 .
[iFrameSizer][iFrameResizer0] Added event listener: Device Orientation Change
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Added event listener: Transition End
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Added event listener: Window Clicked
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Enable MutationObserver
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] In page linking not enabled
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Trigger event lock on
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:150:703:init)
iframeResizer.js:97
[iFrameSizer][Host page] Received:
[iFrameSizer]iFrameResizer0:150:703:init
iframeResizer.js:97 [iFrameSizer][Host page] Checking connection is from: http://phpstack-9420-21004-48731.cloudwaysapps.com
iframeResizer.js:97
[iFrameSizer][Host page] Checking height is in range 0-Infinity
iframeResizer.js:97
[iFrameSizer][Host page] Checking width is in range 0-Infinity
iframeResizer.js:97
[iFrameSizer][Host page] Requesting animation frame
iframeResizer.js:97
[iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 150px
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Trigger event lock off
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] --
明白了!
iframe body height没有正确计算,所以我改变了它计算iframe height的方式。我使用'lowestElement'
来实现这一点,它工作得很好。
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
heightCalculationMethod : 'lowestElement',
});
From GitHub repo: lowestElement循环遍历DOM中的每个元素并找到最低的底部点
我遇到了完全相同的问题。而且,这个问题真的很令人惊讶。
iFrameResize([{log: true}], yourIframe);
将不调整大小。
但是,iFrameResize({log: true}, yourIframe);
可以完美地调整大小。
请从选项中删除数组[{log: true}]
,只保留对象{log: true}
。
这是令人困惑的,因为我从GitHub页面复制了初始化代码,上面写着:const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
:D
似乎OP也犯了同样的错误。
- 可以't根据设备自动调整youtube播放器的大小
- jQuery将侦听器的大小调整为只触发宽度的变化
- 如何使用编辑器制作可调整大小的文本区域
- 在相位器 2 中禁用自动调整大小
- 字体调整器(如果不是)
- 如何调整JavaScript容器以允许多个可能的选择器
- CSS Flex-当重新调整包装器Flex项的大小时,更改其宽度尺寸
- 调整大小方向的侦听器
- 将Highcharts StockChart范围选择器的大小调整为小于6个数据点
- 使用图像映射调整大小器
- 三.js:调整渲染画布的大小(GPU 饥饿片段着色器)
- 调整明亮视频播放器的大小
- 调整图表和导航器的大小
- 根据计数和固定包装器调整元素的大小和计算大小
- 可调整大小是添加第二个包装器,而不是更改第一个包装器的大小
- JQuery 图像调整器和文本操纵器
- 流星:如何让 JS 日期范围选择器调整 API 调用日期参数
- jquery draggable-拖动时调整选择器大小
- PixiJS调整渲染器大小,但保持比例不变
- 使用jQuery调整大小器比使用PHP's TimThumb更快