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를 사용하여 본문 로드가 완료된 후에도 데이터가 여전히 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가 iframe을 프런트 엔드 높이에 적응시키는 방법

Jquery는 iframe 페이지에서 DOM 요소를 가져옵니다(코드 포함)

jQuery 교차 도메인 작업 DOM 메서드 아이프레임

위 내용은 jquery+ajax를 사용하면 iframe을 적용할 때 높이가 조정됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!