erw*_*out 9 javascript jquery iframe-resizer
我正在这个页面上工作:http://factor1hosting.com/~dnaz/wordpress/certifications/
我试图引入跨域iframe.
我正在使用@DavidJBradshaw的iFrame Resizer来实现这一目标.但是,我没有让iframe正常工作.
我只能使用普通的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>
Run Code Online (Sandbox Code Playgroud)
编辑2:这是我的控制台日志,当它触发时,它将iframe设置为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] --
Run Code Online (Sandbox Code Playgroud)
erw*_*out 12
得到它了!
iframe体高度计算不正确,所以我改变了计算iframe高度的方式.我正在使用它'lowestElement'来实现这一点并且效果很好.
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
heightCalculationMethod : 'lowestElement',
});
Run Code Online (Sandbox Code Playgroud)
从GitHub repo:lowestElement循环到DOM中的每个元素,并找到最低的底点