javascript IFrame Resizer 不调整大小
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31688999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IFrame Resizer not resizing
提问by erwstout
I'm working on this page here: http://factor1hosting.com/~dnaz/wordpress/certifications/
我在这个页面上工作:http: //factor1hosting.com/~dnaz/wordpress/certifications/
And I am trying to pull in a cross domain iframe.
我正在尝试引入跨域 iframe。
I am using @DavidJBradshaw's iFrame Resizerto achieve this. However, I am not getting the iframe to work correctly.
我正在使用@DavidJBradshaw 的 iFrame Resizer来实现这一点。但是,我没有让 iframe 正常工作。
I can use just the plain javascript init:
我可以只使用普通的 javascript init:
<script>iFrameResize({log:true})</script>
<script>iFrameResize({log:true})</script>
And when I use this I do get the log but it does not resize. I've also tried the jQuery method:
当我使用它时,我确实得到了日志,但它没有调整大小。我也试过 jQuery 方法:
$('iframe').iFrameResize( [{log: true}] );
$('iframe').iFrameResize( [{log: true}] );
And don't get the log or the iframe resized. I also tried wrapping it in a document ready and that doesn't achieve it either.
并且不要调整日志或 iframe 的大小。我还尝试将其包装在准备好的文档中,但也没有实现。
Anyone have any thoughts or ideas as to why this isn't firing correctly? My console isn't throwing any JS errors... Thanks!
任何人都对为什么这不能正确触发有任何想法或想法?我的控制台没有抛出任何 JS 错误...谢谢!
EDIT:here is an example of how I am currently setup on the HTML side.
编辑:这是我目前如何在 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>
EDIT 2: Here is my console log when it does fire, and it's setting the iframe to 150px even though the content extends longer then that.
编辑 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] --
回答by erwstout
Got it!
知道了!
The iframe body height wasn't calculating correctly, so I changed how it calculates what the iframe height should be. I am using 'lowestElement'
to achieve this and it works great.
iframe 主体高度计算不正确,因此我更改了它计算 iframe 高度的方式。我正在使用它'lowestElement'
来实现这一目标,并且效果很好。
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
heightCalculationMethod : 'lowestElement',
});
From the GitHub repo: lowestElement Loops though every element in the the DOM and finds the lowest bottom point
来自 GitHub 存储库:lowestElement 循环遍历 DOM 中的每个元素并找到最低点