iframe自適應高度的外掛
專案地址:
跨域無效!
用法:
jQuery('iframe').iframeAutoHeight(); 設定所有的iframe
$('iframe.photo').iframeAutoHeight();指定的iframe
<!-- with document ready, most likely in the html head -->
選項:
-
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
keywordfor 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', seeThe
calculation
key should be a function, usually with the signature(iframe, $iframeBody, options, browser)
see more examples below
上傳了壓縮包
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2318/viewspace-2814361/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- html iframe高度自適應HTML
- iframe 跨域高度自適應跨域
- 自動載入的iframe高度自適應
- 真正解決iframe高度自適應問題
- js獲取iframe和父級之間元素,方法、屬,獲取iframe的高度自適應iframe高度JS
- iframe 裡的高度適應的問題
- Iframe嵌入跨域頁面高度自適應實現詳解跨域
- textarea 高度自適應
- textarea文域高度自適應
- textarea高度自適應詳解
- 小程式Swiper高度自適應
- jQuery textarea框高度自適應jQuery
- 巢狀UITextView的UITableViewCell高度自適應巢狀UITextView
- textarea實現高度自適應的理解
- 真正的讓iframe自適應高度 相容多種瀏覽器隨著視窗大小改變瀏覽器
- Widget小元件如何自適應高度元件
- 使用iframe內嵌網頁的時候,如何做到內嵌網頁的高度自適應 有大用網頁
- 微信小程式Swiper高度自適應微信小程式
- easyui-layout佈局高度自適應UI
- 微信輪播圖自適應高度
- UITableViewCell含有WebView的自適應高度新解決方案UIWebView
- iframe巢狀(等寬高比自適應:aspectRatio)巢狀
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- iOS 精準獲取webView內容高度並自適應高度iOSWebView
- React Native踩坑指南:WebView高度自適應React NativeWebView
- iframe高度處理
- textarea文字框高度自適應程式碼例項
- 移動端:對高度自適應的輸入框說不~
- 好程式設計師web前端分享高度自適應程式設計師Web前端
- CSS 圖片固定長寬比實現高度自適應CSS
- 怎麼讓body高度自適應螢幕?為什麼?
- 前端頁面高度和寬度自適應怎麼做?前端
- 67,表格中單元格td自適應高度,最大高度後滾動條顯示
- css--常見左右盒子寬度高度自適應佈局CSS
- auto_size_text 自動調整文字大小以適應其容器的 Flutter 外掛Flutter
- iOS初級開發學習筆記:一個頁面中自動計算cell的高度來自適應tableView的高度iOS筆記View
- 微信小程式之swiper輪播圖中的圖片自適應高度微信小程式
- Android XML靈活佈局之 EditText實現自適應高度同時限制最小和最大高度AndroidXML