1. 程式人生 > >使用iframe內嵌網頁的時候,如何做到內嵌網頁的高度自適應

使用iframe內嵌網頁的時候,如何做到內嵌網頁的高度自適應

在頁面無重新整理更新方面,雖然現在的ajax很強悍,但是處理程式碼相對多點。想比之下,iframe就簡單多了!處理iframe的自適應寬、高,會經常用到,網上整理了一份,寫在這裡備用:

單個iframe 高度自適應:

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.html"></iframe>

起作用的是這句:

onload="this.height=iFrame1.document.body.scrollHeight"

多層巢狀iframe 高度自適應:
A頁面的iframe:

<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php頁面又有一個iframe:

<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

起作用的程式碼是這句:

onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的時候執行了兩條js語句:

1、設定當前iframe自己的高度自適應

this.height=rightform.document.body.scrollHeight  

2、設定父iframe的高度自適應(注意後面的高度單位px,如果不加單位,firefox下不起作用)


parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上程式碼在ie6、ie7、ie8、firefox3.5下測試通過

相關推薦

利用padding-top/padding-bottom百分比進行占位和高度適應

自身 .com gty tps 有一個 想要 很大的 after pic 在css裏面,padding-top,padding-bottom,margin-top,margin-bottom取值為百分比的時候,參照的是父元素的寬度。 比如:父元素寬度是100px, 子元素p

使用iframe網頁的時候如何做到網頁高度適應

在頁面無重新整理更新方面,雖然現在的ajax很強悍,但是處理程式碼相對多點。想比之下,iframe就簡單多了!處理iframe的自適應寬、高,會經常用到,網上整理了一份,寫在這裡備用: 單個iframe 高度自適應: <iframe id="iFrame1" nam

fastjson parse類中有部類時部類巢狀部類報錯

com.alibaba.fastjson.JSONException: create instance error, class com.XXXX.model.ClassA$ClassInnerBat com.alibaba.fastjson.parser.deserial

定義一個包含私有成員變數和函式的類再定義一個部類在內部類函式中訪問外部成員變數並呼叫外部函式。在外部類函式中建立部類物件呼叫部類函式

public class Test5 {         //定義包含私有成員變數和函式         private int a = 201320883;         private voi

java部類學習匿名部類的呼叫。

一、什麼是內部類 顧名思義,內部類就是將類寫在其他類的內部,可以寫在其他類的成員位置和區域性位置,這時寫在其他類內部的類就稱為內部類。 二、什麼時候用內部類 如果一個事物裡包含著其他事物,其他事物,可以建立一個內部類。 三、內部類的劃分 內部類分為成員內部類和區域性內部類。內

網穿透網地址對映為外網地址

最近由於專案需要,測試微信支付回撥,但是微信回撥只能訪問到外網地址,自己電腦上的內網地址訪問不到,所以需要將內網地址對映為外網地址,這樣外網就能訪問我的內網專案了。 在網上找了一些工具,像花生殼、nat123這些工具,很多都收費了。不過還是找到了免費的工具,就

基於ngrok的網穿透網對映到公網上

熟悉Java的都熟悉,tomcat作為一個本地伺服器,僅限於本地訪問或者區域網訪問,如果想讓 其他的人訪問,就必須將專案放到伺服器上面,這樣的前提是必須要有一臺伺服器,其實也可以用也給辦法將內網穿透到

父容器div的子元素div為float時父元素無法撐開(或高度適應)的解決方式以及css中position和float的介紹

先簡單給出父元素無法高度自適應時的解決方案:       第一種:在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素,從而具有了實際的height值。       第二種:在子元素的最下面加上一個 空元素,並且設定clear:both,但

外層div隨層div高度適應

1.0 高度 lang init nbsp flow -c col div高度自適應 首先說一下textarea的高度隨文字的內容自適應,用div模擬textarea。直接看代碼。其中 contenteditable="true"表示div可以編輯。。主要是設置 overf

div裡巢狀iframe設定iframe及div的高度適應

1. div+iframe <div class="main"> <iframe id="contentFrame" name="contentFrame" src="url" onload="javascript:reinitIframe(

[Swift通天遁地]二、表格表單-(3)在表格中套另一個表格並使Cell的高度適應

works uiview 添加 comm exe bounds tro enc 表格 本文將演示如何在表格中嵌套另一個表格並使Cell的高度自適應,創建更加強大的布局效果。 在項目文件夾【DemoApp】上點擊鼠標右鍵,彈出右鍵菜單。 【New File】->【C

總結iframe高度適應適應子頁面高度

var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = brow

利用ExtJs Viewportiframe螢幕高度適應

js自適應網上好多方法做的不是很好 想起ExtJs的Viewport可以對center的iframe做 Ext.onReady(function(){ //iframe 高度自適應 new Ext.Viewport({ layout:"border", item

layui iframe彈出層高度適應並垂直居中

  var bodyHH = document.documentElement.clientHeight;  if(heg + titHeight + btnHeight > $(window).height()){    layero.css({height:$(window).height(), 

iframe高度適應取消滾動條

專案中碰到左側是一個列表,是固定定位,點選不同的列表選項右側引入不同的iframe地址檔案,但是iframe設定屬性的時候高度只識別px,設定百分百之類的都無效,並且不想要iframe本身的滾動條,頁面只需要一個預設的滾動條。實現效果如下圖:html程式碼:    <i

iframe雙層巢狀後高度適應

/**  * 自適應iframe高度  * @param iParentFrameName :父框架ID  * @param iframeName:框架ID  */   function SetIframeSize(iParentFrameName,iframeName)

CSS完美實現iframe高度適應(支持跨域)

真的 高度 org lns nal aid .org bsp 方法 Iframe的強大功能偶就不多說了,它不但被開發人員經常運用,而且黑客們也常常使用它,總之用過的人知道它的強大之處,但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應,這一點讓很多人都頭

table中的單行省略並不能讓td能適應

targe href csdn mage cati 技術分享 ges details image 所以我不得對單行勝率設置width,多行在待測中(傳送門)。。。 table中的單行省略,並不能讓td能自適應

iframe高度適應子頁面高度 使用onload屬性

sca height init window 屬性 fun frame var scroll <!DOCTYPE html> <html> <head> <title>測試</title> <

iframe高度適應

borde 16px div 後者 size 我們 第一次用 一次 edit   第一次用iframe標簽代替ajax異步刷新去做後天管理系統,發現iframe的確是個好東西。但有個最大的問題就是——高度不能自適應,要麽設置死,要麽用js去動態獲取目標資源body的heig