新手指南支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制作

香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制 ...
您正在討論區的: 支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制 ...
查看: 61|回復: 0
收起左側

支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

iframe的高度自適應是一個老生常談的問題了,今天再找到幾個關于iframe高度自適應實現,我稍加整理了一下與各位朋友分享,代碼簡潔兼容性也不錯。
iframe高度隨頁面內容自適應高度,當頁面高度變動時iframe高度也自動變化
瀏覽器兼容︰IE6++、Firefox全系列、Chrome全系列、(其他版本瀏覽器未做測試,期待你測試評論反饋以完善本文,謝謝)
同域環境下實現方法︰
方法一︰僅修改iframe父頁面(iframeA.php),iframe子頁面內容(iframeB.php)不用添加其他js或額外代碼
iframe父頁面(iframeA.php)添加代碼如下︰
代碼如下復制代碼


方法二︰修改iframe子頁面內容(iframeB.php),iframe父頁面(iframeA.php)不需要加入js代碼
iframe父頁面(iframeA.php)添加代碼如下︰
代碼如下復制代碼

iframe子頁面(iframeB.php)代碼範例如下︰







測試數據


測試數據


測試數據








注意︰這里需要定義body onload屬性

跨域環境下實現方法︰
iframe若是跨域,不能直接用JS來控制,只能通過一個中間代理,我們這里選擇在iframe的子頁面(iframeB.php)中加一個與iframe父頁面(iframeA.php)同域的頁面(iframeC.php);這樣頁面iframeC.php就能和父頁面iframeA.php進行無障礙的通訊了;因為子頁面iframeB.php頁面嵌入iframeC.php,所以頁面iframeB.php可以改寫頁面iframeC.php的href值,這里給出一個例子,假設域名對應文件如下︰
引用
iframeA.php 位于域上
iframeB.php 位于域上
iframeC.php 位于域上
實現方式︰
iframeA.php代碼︰
代碼如下復制代碼


iframeB.php代碼︰
代碼如下復制代碼


Height Auto: off
Height +10px
Height -10px




iframeC.php代碼︰
代碼如下復制代碼

最後值得注意的一點︰包含該iframe的div高度值不要設置,iframe的高度值最好也不要設置。
補充一點︰iframe子頁面submit提交跳轉處理

注意︰target=「_self」
[/td] [/tr]        [/table]





系統自動相關推薦tag:forum,交友,alexa



上一篇︰js添加事件與選取元素方法-js教程-網頁制作
下一篇︰js ajax中傳遞中文參數處理-js教程-網頁制作
+10
如您覺得" 支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制作 "很膠,請share出去
您正在回覆: 支持跨域iframe高度隨內容動態縮放自適應-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走

閱讀版|閱讀版大量|純文字網頁|香港交友討論區

Copyright © 香港交友討論區HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|論壇聯絡
HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 27-5-2018 03:28 AM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat