jquery ajax應用中iframe自適應高度問題解決方法
iframe自適應高度本身是很簡單的方法,就是在頁面加載完成后,重新計算一下高度即可。
代碼如下:
//公共方法:設置iframe的高度以保證全部顯示數(shù)據(jù)
//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) { }
}
}
調(diào)用reSetIframeHeight();方法即可。
但是還有一種情況就是使用jquery ajax請求數(shù)據(jù),數(shù)據(jù)都是在body load完成后,還在進行http請求,這時候沒有數(shù)據(jù)占據(jù)窗口高度,reSetIframeHeight方法無法計算出來高度。
這時候,我們想到一個方法:ajax什么時候能夠執(zhí)行完成,當然是Complete事件是執(zhí)行完成。
但是我們也不能在每一個頁面里的ajax Complete事件中添加處理。這里就用到了jquery ajax的全局變量。
處理ajax和iframe自適應的代碼:
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 () {
});
先執(zhí)行一下reSetIframeHeight,再在每個ajax完成后調(diào)用reSetIframeHeight。
經(jīng)過測試有效。
相關文章
bootstrapfileinput實現(xiàn)文件自動上傳
這篇文章主要介紹了bootstrapfileinput實現(xiàn)文件自動上傳,bootstrap fileinput插件對多種類型的文件提供文件預覽,并且提供了多選等功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動端開發(fā)時,一般都是試用chrome瀏覽器的移動端模式進行開發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個新的調(diào)試方法,所以這篇文章主要給大家介紹了關于移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。2017-10-10js實現(xiàn)左側網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關資料,需要的朋友可以參考下2017-03-03微信小程序tabBar模板用法實例分析【附demo源碼下載】
這篇文章主要介紹了微信小程序tabBar模板用法,結合具體實例形式分析了tabBar模板的定義、配置、引用等相關操作技巧,需要的朋友可以參考下2017-11-11JS中的算法與數(shù)據(jù)結構之鏈表(Linked-list)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之鏈表(Linked-list),結合實例形式詳細分析了javascript中鏈表的概念、原理、定義及常用操作技巧,需要的朋友可以參考下2019-08-08