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高度自適應解決方案
- jquery 實現iframe 自適應高度jQuery
- 自動載入的iframe高度自適應
- iframe高度自適應程式碼例項
- <iframe>高度自適應程式碼例項
- 如何獲取跨域iframe高度跨域
- 真正解決iframe高度自適應問題
- jquery實現的iframe高度自適應效果jQuery
- javascript實現的iframe高度自適應程式碼JavaScript
- [轉]利用location.hash實現跨域iframe自適應高寬跨域
- iframe之間通訊問題及iframe自適應高度問題
- js獲取iframe和父級之間元素,方法、屬,獲取iframe的高度自適應iframe高度JS
- ajax應用實現iframe高度自適應程式碼例項
- jquery實現的iframe高度自適應程式碼例項jQuery
- 原生javascript實現的iframe高度自適應程式碼例項JavaScript
- 最新Iframe全瀏覽器相容自適應高度解決方案瀏覽器
- TabelViewCell高度自適應View
- 根據螢幕高度自適應元素高度
- 小程式Swiper高度自適應
- textarea高度自適應詳解
- jQuery textarea框高度自適應jQuery
- UITableViewCell自適應圖片高度UIView
- iframe 元素跨域訪問跨域
- 實現iframe內容的自適應
- [DIV+CSS] IE6浮出層穿透解決方案中的iframe高度自適應CSS穿透
- 微信小程式Swiper高度自適應微信小程式
- iOS cell中webview自適應高度iOSWebView
- IFrame跨域問題筆記跨域筆記
- IE中iframe跨域訪問跨域
- Vue嵌入iframe,iframe如何跨域呼叫vue內路由Vue跨域路由
- Widget小元件如何自適應高度元件
- textarea實現高度自適應的理解
- 巢狀UITextView的UITableViewCell高度自適應巢狀UITextView
- easyui-layout佈局高度自適應UI
- iOS 自定義tableView Cell、高度自適應iOSView