contentDocument實現iframe自適應子頁面高度
剛開通部落格不久,經常在看到前輩和大牛在部落格上分享技術經驗,就想用部落格來記錄一些遇到過的問題和解決問題的經驗。
前兩天一朋友和我討論到用iframe內嵌網頁如何做到讓iframe自適應子頁面的高度。我之前也遇到過同樣的問題,如果iframe在不設定高度的情況下,預設高度為150px(在谷歌瀏覽器下親試,其他瀏覽器未實驗),如果iframe通過js引用其他子頁面進來也無法像div那樣通過內容的大小來改變iframe的高度問題,也就是說,內嵌子頁面的大部分內容都會被iframe外框的高度限制從而顯示不出來。
當然如果需要切換的每個子頁面的高度都一樣的話,那麼預設iframe的高度是一種很方便有很簡單的方式,如果每個子頁面的高度不一樣,那麼就需要用js來改變iframe的高度了,由於專案中只用到一個js檔案,所有的頁面引用的都是這個js檔案,所以問題就變得比較麻煩。按理說,我們可以通過獲取子頁面的高度來設定iframe的高度,在onload方法中可以獲取到父頁面和子頁面的高度,但由於是點選式切換頁面導致this所指的物件不同,在onload方法中獲取的子頁面高度資料沒有辦法傳遞到success()方法中。在一下js方法中用console.log(this);可以知道獲取第一個頁面高度的this物件和獲取到第二個頁面高度的this物件還有sucess()方法中的this物件都是不同的。所以利用物件儲存的方式也不行。
這是前端程式碼:
由於呼叫sucess()方法的物件在父視窗,所以在sucess()中的document物件是父視窗的document物件,可以直接獲取到iframe標籤物件,從而對irame標籤的高度進行設定,
以下程式碼中,two是iframe內嵌子頁面的body的id值
由於js檔案的執行順序是通過html的呼叫來決定的,此檔案的執行順序為:
父頁面.onload --> sucess()方法 --> 子頁面.onload
當父頁面載入完畢時呼叫onload方法,之後點選li標籤時出發sucess()方法,在sucess方法中設定跳轉頁面,當頁面跳轉完畢,子頁面載入完成時,子頁面呼叫了onload方法。
在子頁面載入時的this.parent可以獲取到父頁面的window物件,通過window物件獲取父頁面的body物件並設定body物件的高度加上子頁面的高度。之後再設定iframe標籤的高度為子頁面的高度。如果設定iframe高度不設定父頁面的body高度的話,iframe的高度會因為body物件的高度受限制而顯示不出來。
相關推薦
contentDocument實現iframe自適應子頁面高度
剛開通部落格不久,經常在看到前輩和大牛在部落格上分享技術經驗,就想用部落格來記錄一些遇到過的問題和解決問題的經驗。 前兩天一朋友和我討論到用iframe內嵌網頁如何做到讓iframe自適應子頁面的高度。我之前也遇到過同樣的問題,如果iframe在不設定高
iframe高度自適應子頁面高度 使用onload屬性
sca height init window 屬性 fun frame var scroll <!DOCTYPE html> <html> <head> <title>測試</title> <
總結iframe高度自適應,自適應子頁面高度
var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = brow
【同域】根據iframe中引用的網頁的高度來修改父級頁面的iframe高度-iframe自適應子頁高度
如題。 網上提供了很多方法。但是在進行測試的時候都會出現這樣那樣的問題。在一個好同學的幫助下,我使用了這種方法來實現了這個功能。 在父級頁面iframe元素外部使用一個<div>元素包圍住。然後設定<div>的初始高度
iframe自適應主窗體高度
fun document order rip javascrip nth 自適應 true sha <iframe src="" frameborder="0" style="overflow-y: auto; overflow-x:hidden;" width="
iframe自適應高度,以及一個頁面加載多個iframe
nload 自適應 ntb new 一個 type set var con <iframe id="iframepage" src="Index.html" name="iframepage" frameborder="0" width="1349" scroll
iframe 自適應高度 去掉iframe滾動條 只留外面頁面的滾動條
解決方法如下: 在iframe所呼叫的頁面增加如下程式碼: $(document).ready(function(){ if(window.parent != window){ parent.document.getElementById("mainMenu
iframe自適應高度和寬度 全css實現無javascript
<html> <head> <title>選單管理</title> </head> <body style="margin:0px;padding:0px;overflow:hidden;"> &
js兼容的Iframe自適應高度
solid abs log ack row ati onload meid window js解決Iframe套用頁面,自適應高度的問題。 兩個頁面,a.html和b.html a.html <div style="border: 1px solid;">
css利用padding百分比實現圖片自適應高度
應用場景 寬高比率,實現圖片自適應高度,防止圖片載入過程高度為0,載入完圖片高度撐起,它下面的div抖動問題 重點:CSS百分比padding都是相對寬度計算的 <div class="works-item-t"> <img src="./150x200.png">
小程式頁面跳轉傳參-this和that的區別-登入流程-下拉選單-實現畫布自適應各種手機尺寸
小程式頁面跳轉傳參 根目錄下的 app.json 檔案 頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab { "pages": [ "pages/index/index", "pages/logs/index" ], "window":
網頁中的iframe自適應高度寬度,延遲計算高寬度
//在iframe onlad時執行下面的程式碼 id="myFileTableIframe" function IframeAutoHeightAndWidth(){ var iframe=document.getElementById("myFileTableI
iframe 自適應高度
("#capability_iframe").load(function(){ var mainheight = $(this).contents().find("body").heigh
實現UILabel自適應高度的兩種方式
1.sizeThatFits或者sizeToFit UILabel *label=[[UILabel alloc]init]; labell.font=[UIFont systemFontOfSize:11.0]; label.text = @"今天天氣不錯呢,準備到中國
iframe 自適應高度,更改內容時iframe高度怎麼根據新的內容高度自動改變
//code from http://caibaojian.com/iframe-adjust-content-height.html <iframe src="backtop.html" fr
[轉]讓iframe自適應高度-真正解決
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象。 (需要只有iframe出現滾動條) 本人一開始這麼寫:會造成只有主頁面載入
iframe自適應高度以及呼叫父子視窗的方法
<iframe name="mainFrame" id="mainFrame" frameborder="0" src="" style="margin: 0 auto; width: 100%;z-index:100;position: relati
JavaScript應用:Iframe自適應其載入的內容高度
main.htm: <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
跨域下的iframe自適應高度
a.html中包含iframe:<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe> 在c.html中加入如下程式碼:
在做iframe自適應的時候,iframe高度不斷自增長
如果iframe裡面的網頁是這樣的 <html style="height:100%"> <body style="height:100%"> <div style="margin-top:10px"> </div> <