> 웹 프론트엔드 > JS 튜토리얼 > jquery ajax application_javascript 기술의 iframe 적응형 높이 문제에 대한 솔루션

jquery ajax application_javascript 기술의 iframe 적응형 높이 문제에 대한 솔루션

WBOY
풀어 주다: 2016-05-16 16:52:35
원래의
969명이 탐색했습니다.

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 == "완료") {
var bHeight =
iframe.contentWindow.document.body.scrollHeight;
var dHeight =
iframe.content Window.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;
           } 잡기(err2) {                                        |

하지만 jquery ajax를 사용하여 데이터를 요청하는 상황이 있습니다. 본문 로드가 완료된 후에도 데이터는 여전히 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(함수 (e, xhr, opts) {}).ajaxSuccess(함수 (e, xhr, opts) {
}).ajaxComplete(함수 (e, xhr, opts) {
Completecount ;
reSetIframeHeight();

}).ajaxStop(function () {
});

reSetIframeHeight를 먼저 실행한 다음 각 ajax가 완료된 후 호출 reSetIframeHeight.

테스트를 거쳤으며 유효합니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿