iframe 跨域高度自適應
在實際應用中,很多時候通過<iframe>引入頁面,如果同域情況,可以使用以下程式碼。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document:ifm.contentDocument; if(ifm != null && subWeb != null){ ifm.height = subWeb.body.scrollHeight; } } </script> </head> <body> <iframe src="iframe.html" id="iframepage" name="iframepage" width="100%"></iframe> </body> </html>
以上程式碼可以實現我們的要求,但是很多時候通過iframe引入的頁面是跨域的,上面的程式碼就不起作用,這是因為在引入外部頁面的過程中,由於跨域安全問題會導致報錯,如下:
因而會導致設定高度的程式碼無法得到執行,也就無從談起高度自適應了,可以改變一下思路實現此功能。
我們可以通過一個“中介”來完成此任務。
比如在域A中有一個頁面a.html,我們要引入域C中的頁面c.html,這樣我們可以在域A中再建立一個“中介”頁面b.html,作為c.html的子頁面,然後獲取一些相關資訊,最後通過b.html來實現設定a.html中iframe高度的效果,因為b和a是在同域下的,所以不存在安全障礙。
c.html中的程式碼如下:
[HTML] 純文字檢視 複製程式碼<iframe id="b_id" width="100%" src="http://域A/b.html" style="display:none"> </iframe> <script type="text/javascript"> var c_height=Math.max(document.body.scrollHeight,document.body.clientHeight); var b_iframe = document.getElementById("b_id"); b_iframe.src = b_frame.src+"#"+b_height; </script>
通過url,為"中介"頁面b.html傳遞了c.html的高度資訊,這個高度就是a.html中iframe的自適應高度。
b.html中的程式碼如下:
[JavaScript] 純文字檢視 複製程式碼//得到a.html中的a_iframe var a_iframe=parent.parent.document.getElementById("a_iframe"); var hash_url = window.location.hash; //得到傳遞過來的height屬性 var hash_height = hash_url.split("#")[1]+"px"; //調整a_iframe的height,達到自適應 a_iframe.height = hash_height;
綜上所述,就可以實現跨域iframe高度自適應效果了。
相關文章
- Iframe嵌入跨域頁面高度自適應實現詳解跨域
- html iframe高度自適應HTML
- iframe自適應高度的外掛
- 自動載入的iframe高度自適應
- 真正解決iframe高度自適應問題
- textarea文域高度自適應
- js獲取iframe和父級之間元素,方法、屬,獲取iframe的高度自適應iframe高度JS
- iframe 裡的高度適應的問題
- textarea 高度自適應
- textarea高度自適應詳解
- 小程式Swiper高度自適應
- jQuery textarea框高度自適應jQuery
- iframe 元素跨域訪問跨域
- Widget小元件如何自適應高度元件
- Vue嵌入iframe,iframe如何跨域呼叫vue內路由Vue跨域路由
- 真正的讓iframe自適應高度 相容多種瀏覽器隨著視窗大小改變瀏覽器
- 巢狀UITextView的UITableViewCell高度自適應巢狀UITextView
- 微信小程式Swiper高度自適應微信小程式
- textarea實現高度自適應的理解
- easyui-layout佈局高度自適應UI
- 微信輪播圖自適應高度
- iframe跨域的幾種常用方法跨域
- iframe巢狀(等寬高比自適應:aspectRatio)巢狀
- iOS 精準獲取webView內容高度並自適應高度iOSWebView
- React Native踩坑指南:WebView高度自適應React NativeWebView
- iframe高度處理
- 使用iframe內嵌網頁的時候,如何做到內嵌網頁的高度自適應 有大用網頁
- 跨域庫herryPostMessage.js的一些優化,多iframe跨域跨域JS優化
- UITableViewCell含有WebView的自適應高度新解決方案UIWebView
- textarea文字框高度自適應程式碼例項
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- 好程式設計師web前端分享高度自適應程式設計師Web前端
- CSS 圖片固定長寬比實現高度自適應CSS
- 怎麼讓body高度自適應螢幕?為什麼?
- 前端頁面高度和寬度自適應怎麼做?前端
- Clustering and Projected Clustering with Adaptive Neighbors(自適應鄰域聚類CAN和自適應鄰域投影聚類PCAN)ProjectAPT聚類PCA
- 67,表格中單元格td自適應高度,最大高度後滾動條顯示
- 移動端:對高度自適應的輸入框說不~