그림 로드 완료 판단, iframe 높이 적응

RSS 구독 을 할 때 이런 문제 가 발생 했 습 니 다. 글 제목 을 클릭 할 때 글 의 상세 한 화면 이 팝 업 됩 니 다.글 의 내용 을 팝 업 div 층 으로 직접 표시 하려 고 했 으 나 div 의 overflow: scroll 스크롤 바 가 예 쁘 지 않 습 니 다. 그리고 안 드 로 이 드, ios 4 이하 에 서 는 효력 을 잃 습 니 다. (이것 은 iscroll. js 로 해결 할 수 있 습 니 다.)마지막 으로 iframe 으로 글 내용 을 표시 합 니 다.하위 페이지 와 부모 페이지 의 통신 문제 가 관련 되 어 있 습 니 다. 잘 모 르 겠 습 니 다 js 의 iframe 하위 페이지 와 부모 페이지 통신.
하위 페이지 에서 부모 페이지 에 전 달 된 글 내용 을 가 져 올 때 innerHTML 을 사용 하여 내용 을 div 에 넣 습 니 다.코드 는 다음 과 같 습 니 다:

<div id="article-area-id">

        <div class="article-area" id="art">

        </div>

    </div>

    <div id="close"></div>

    <script src="js/vendor/jquery-1.10.2.min.js"></script>

    <script>

        var close_e = document.getElementById("close"),

                e =  document.getElementById("art");

        function get(data){

            e.innerHTML = data;

            close_e.setAttribute("class","close");

            resizeIframe();

        }

        function resizeIframe(){

            parent.setIframe(document.body.offsetHeight);

        }

        close_e.addEventListener("click",function(){

            parent.closeIframe();

            close_e.removeAttribute("class");

        });



    </script>

innerHTML 이후 iframe 의 높이 는 내용 이 증가 해서 바 뀌 지 않 았 습 니 다. 여기 서 iframe 의 높이 적응 이 필요 합 니 다.여기에 박문 한 편 이 있다. Js 동적 으로 iframe 하위 페이지 의 높이 정 리 를 가 져 옵 니 다.
그러나 저 는 이 블 로그 에서 말 한 것 과 다 릅 니 다. 제 iframe 은 내용 을 설정 할 때 불 러 왔 기 때문에 onload 사건 을 촉발 하지 않 습 니 다. 그래서 저 는 하위 페이지 로 자신의 높이 를 다시 가 져 와 서 아버지 페이지 에 전달 합 니 다.
부모 페이지 에서 하위 페이지 iframe 의 높이 를 설정 합 니 다.

function setIframe(count) {

    var e = document.getElementById("ifm-id"),

        clientWidth = document.body.clientWidth,

        sty;

    sty="height:"+(count+50)+"px;top:"+$(document).scrollTop()+"px;left:"+ (clientWidth>600?clientWidth*0.2+"px":clientWidth*0.1+"px");

    e.setAttribute("style",sty);

    e.scrolling="no";

    //       ，                      。

    if(count+$(document).scrollTop() > document.body.clientHeight){

        document.body.height = count+$(document).scrollTop();

    }

}

위 코드 처리 후 iframe 의 높이 를 초기 화 할 수 있 습 니 다. 그러나 내용 에 그림 이 포함 되 어 있 기 때문에 부모 페이지 높이 에 전달 할 때 하위 페이지 에 그림 을 불 러 오지 않 으 면 부모 페이지 에 전 달 된 높이 가 그림 로 딩 완료 후의 높이 보다 작 고 하위 페이지 가 불완전 하 게 표 시 될 수 있 습 니 다.처음에 나 는 블 로그 < JS 그림 너비 빠르게 가 져 오 는 방법 > 한 편 을 생각 한 후에 정규 srcReg = / http: \ \ / \ \ S * \ 를 사용 했다. (jpg | png | jpeg) \ S * (? = ")/ g, 모든 그림 을 가 져 와 너비 와 높이 를 얻 습 니 다. 각각 img 에 width 와 height 속성 을 설정 하면 iframe 의 정확 한 높이 를 얻 을 수 있 고 장치 의 화면 너비 에 따라 너무 큰 그림 을 축소 할 수 있 습 니 다. 그러나 저 는 제3자 에서 글 을 캡 처 하기 때문에 그림 에 304 권한 문제 가 발생 할 때 정규 그림 을 사용 하여 가 져 올 수 없 는 그림 을 숨 길 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.

imgReg = /src=\S*\.(jpg|png|jpeg)\S*"/g;

des = description.replace(imgReg,function($1){

            return $1+' onerror=\"this.style.display=\'none\';return true;\"';

        })

그림 에 권한 이 없 으 면 이상 을 알 릴 수 있 지만 그림 의 이상 을 포착 할 수 없 기 때문에 그림 의 너비 가 높 은 요청 사건 을 제때에 중지 할 수 없습니다. 이번 에는 그림 의 너비 가 높 은 것 을 빨리 얻 지 못 하고 여러 그림 을 얻 을 때 큰 지연 이 있 습 니 다. 이 문 제 는 오랫동안 고민 하 다가 좋 은 해결 방안 을 찾 지 못 했 습 니 다. 나중에 다른 사람의 것 을 볼 수 있 는 지 적어 보 세 요.해결 방법.
다음 시험 으로 남 겨 두 는 것 은 img 다운로드 가 완료 되면 innerHTML 을 사용 하여 HTML 코드 를 문서 에 기록 한 후, 그림 을 캐 시 에서 읽 는 것 이 아 닌 지, 추가 적 인 네트워크 요청 이 발생 하지 않 으 면 좋 지 않 을 것 입 니 다. 마지막 으로 사용 하 는 해결 방법 은 부모 페이지 에서 스크롤 이 벤트 를 가 져 와 하위 페이지 body 높이 와 iframe 높이 가 일치 하 는 지 판단 하 는 것 입 니 다.일치 하지 않 으 면 iframe 높이 를 뛰 어 넘 습 니 다.

    $(window).scroll(function(){

        $this = $(this);

        if($(document).height() - $this.height() - $this.scrollTop() < 400){

            $(".loadImg").addClass("load");

            addContainer(10);

        }

        var $ifm = $("#ifm-id");

        var ifmHeight = $(document.getElementById("ifm-id").contentWindow.document.body).height();

        if($ifm.height() !== (ifmHeight+50)){

            $ifm.height(ifmHeight + 50);

        }

    });