为了账号安全,请及时绑定邮箱和手机立即绑定

iframe自适应高度的插件

标签:
Java

项目地址:https://github.com/house9/jquery-iframe-auto-height


跨域无效!


用法:

jQuery('iframe').iframeAutoHeight(); 设置所有的iframe

$('iframe.photo').iframeAutoHeight();指定的iframe

<!-- with document ready, most likely in the html head --><script>  $(document).ready(function () {    $('iframe').iframeAutoHeight({debug: true});  });</script><!-- inline, after the iframe --><iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="my_iframe.html" class="auto-height" scrolling="no" frameborder="0"></iframe><script>  $('iframe.auto-height').iframeAutoHeight({minHeight: 240});</script>

选项:

  • callback: function


    • Default empty function

    • Optionally define a callback function (in this case inline) that will do something with the callbackObject.newFrameHeight value. This can for instance be used with easyXDM to alert another domain that the frame has changed height.

    • Example:$('iframe').iframeAutoHeight({callback: function(callbackObject) { alert(callbackObject.newFrameHeight);} });

    • you can also access the current iframe jquery wrapper object use the this keyword

    • for example:callback: function(callbackObject) { alert(callbackObject.newFrameHeight + " and the iframe href is:" + $(this).attr('src')); }

  • debug: boolean


    • Default is false

    • Will log some internal information to the console, if available

    • Example: $('iframe').iframeAutoHeight({debug: true})

  • heightOffset: integer


    • Default is 0

    • Unit is pixels

    • Optionally add some buffer to the bottom

    • Example: $('iframe').iframeAutoHeight({heightOffset: 20});

  • minHeight: integer


    • Default is 0

    • Unit is pixels

    • Sets the iframe height to this value if the calculated value is less

    • Example: $('iframe').iframeAutoHeight({minHeight: 200});

  • animate: boolean


    • Default is false

    • Uses jquery animate with duration of 500 when resizing the iframe

    • Example: $('iframe').iframeAutoHeight({animate: true});

  • resetToMinHeight: boolean


    • Default is false

    • hard set the iframe height to the minHeight before re-sizing

  • triggerFunctions: Array of functions


    • Default is an empty array

    • Optionally define 1 or more functions that will have access to the resize method

    • can be used to resize the iframe from external events such as click or window resize - see examples below

  • heightCalculationOverrides: Array of 2 element arrays


    • Default is an empty array

    • Optionally re-define the height calculation method(s)

    • override the default implementation or just override specific browsers

    • Example:$('iframe').iframeAutoHeight({strategyOverrides: [{ browser: 'mozilla', calculation: function () { return 2000; }}]);

    • The browser key should be one of 'webkit', 'mozilla', 'msie', 'opera' or 'default', seehttp://api.jquery.com/jQuery.browser/

    • The calculation key should be a function, usually with the signature(iframe, $iframeBody, options, browser)

    • see more examples below


上传了压缩包


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消