這次給大家帶來jquery ajax應用iframe時使其自適應高度,jquery ajax應用iframe時使其自適應高度的注意事項有哪些,下面就是實戰案例,一起來看一下。
iframe自適應高度本身就是很簡單的方法,就是在頁面載入完成後,重新計算一下高度即可。
//公共方法:设置iframe的高度以保证全部显示数据 //function SetPageHeight() { // var iframe = getUrlParam('ifname'); // var myiframe = window.parent. document .getElementById(iframe); // iframeLoaded(myiframe); //} var iframeLoaded = function (iframe) { if (iframe.src.length > 0) { if (!iframe.readyState || iframe.readyState == "complete") { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } } } //分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id var reSetIframeHeight = function() { try { var oIframe = parent.document.getElementById(window.name); oIframe.height = 100; iframeLoaded(oIframe); } catch (err) { try { parent.document.getElementById(window.name).height = 1000; } catch (err2) { } } }
呼叫reSetIframeHeight();方法即可。
但還有一種情況就是使用jquery ajax請求數據,數據都是在body load完成後,還在進行http請求,這時候沒有數據佔據窗口高度,reSetIframeHeight方法無法計算出來高度。
這時候,我們想到一個方法:ajax什麼時候能夠執行完成,當然是Complete事件是執行完成。
但我們也無法在每個頁面裡的ajax Complete事件中加入處理。這裡就用到了jquery ajax的全域變數。
處理ajax和iframe自適應的程式碼:
var sendcount = 0; var completecount = 0; // 添加ajax全局 事件处理 。 reSetIframeHeight(); $(document).ajaxStart(function (a, b, c) { }).ajaxSend(function (e, xhr, opts) { sendcount++; }).ajaxError(function (e, xhr, opts) { }).ajaxSuccess(function (e, xhr, opts) { }).ajaxComplete(function (e, xhr, opts) { completecount++; reSetIframeHeight(); }).ajaxStop(function () { });
先執行一下reSetIframeHeight,再在每個ajax完成後呼叫reSetIframeHeight。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是jquery+ajax應用iframe時使其自適應高度的詳細內容。更多資訊請關注PHP中文網其他相關文章!