jquery ajax應(yīng)用中iframe自適應(yīng)高度問(wèn)題解決方法
iframe自適應(yīng)高度本身是很簡(jiǎn)單的方法,就是在頁(yè)面加載完成后,重新計(jì)算一下高度即可。
代碼如下:
//公共方法:設(shè)置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;
}
}
}
//分頁(yè)時(shí)重新設(shè)置 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請(qǐng)求數(shù)據(jù),數(shù)據(jù)都是在body load完成后,還在進(jìn)行http請(qǐng)求,這時(shí)候沒(méi)有數(shù)據(jù)占據(jù)窗口高度,reSetIframeHeight方法無(wú)法計(jì)算出來(lái)高度。
這時(shí)候,我們想到一個(gè)方法:ajax什么時(shí)候能夠執(zhí)行完成,當(dāng)然是Complete事件是執(zhí)行完成。
但是我們也不能在每一個(gè)頁(yè)面里的ajax Complete事件中添加處理。這里就用到了jquery ajax的全局變量。
處理ajax和iframe自適應(yīng)的代碼:
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,再在每個(gè)ajax完成后調(diào)用reSetIframeHeight。
經(jīng)過(guò)測(cè)試有效。
- 使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問(wèn)題
- javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)高度和寬度
- 教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
- JQuery自適應(yīng)IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
- 基于jquery的兼容各種瀏覽器的iframe自適應(yīng)高度的腳本
- jQuery解決iframe高度自適應(yīng)代碼
- jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法
相關(guān)文章
bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
這篇文章主要介紹了bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳,bootstrap fileinput插件對(duì)多種類型的文件提供文件預(yù)覽,并且提供了多選等功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11跟我學(xué)習(xí)javascript的基本類型和引用類型
跟我學(xué)習(xí)javascript的基本類型和引用類型,利用圖解的方式,告訴大家javascript的基本類型和引用類型的區(qū)別和聯(lián)系,感興趣的小伙伴們可以參考一下2015-11-11移動(dòng)端網(wǎng)頁(yè)開發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動(dòng)端開發(fā)時(shí),一般都是試用chrome瀏覽器的移動(dòng)端模式進(jìn)行開發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個(gè)新的調(diào)試方法,所以這篇文章主要給大家介紹了關(guān)于移動(dòng)端網(wǎng)頁(yè)開發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。2017-10-10js實(shí)現(xiàn)左側(cè)網(wǎng)頁(yè)tab滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)左側(cè)網(wǎng)頁(yè)tab滑動(dòng)門效果代碼,涉及JavaScript頁(yè)面元素的遍歷及元素屬性動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-03-03layui實(shí)現(xiàn)給某一列加點(diǎn)擊事件
今天小編就為大家分享一篇layui實(shí)現(xiàn)給某一列加點(diǎn)擊事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10微信小程序tabBar模板用法實(shí)例分析【附demo源碼下載】
這篇文章主要介紹了微信小程序tabBar模板用法,結(jié)合具體實(shí)例形式分析了tabBar模板的定義、配置、引用等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list),結(jié)合實(shí)例形式詳細(xì)分析了javascript中鏈表的概念、原理、定義及常用操作技巧,需要的朋友可以參考下2019-08-08js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12