[javascript] iFrame이로드 될 때로드 메시지를 표시하는 방법은 무엇입니까?

Program / 글쓴이

로드 속도가 매우 느린 타사 웹 사이트를로드하는 iframe이 있습니다.

iframe이로드되는 동안 사용자에게 큰 빈 공간이 표시되지 않는 동안로드 메시지를 표시 할 수있는 방법이 있습니까?

추신. iframe은 타사 웹 사이트 용이므로 페이지에 아무것도 수정 / 삽입 할 수 없습니다.

답변

다음 CSS 접근 방식을 수행했습니다.

<div class="holds-the-iframe"><iframe here></iframe></div>

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}

답변

이 코드 가 도움이 될 것이라고 생각합니다 .

JS :

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

HTML :

<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

CSS :

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left: 0px;
    position: absolute;
}

답변

달성하려는 자리 표시 자일 경우 : 미친 접근 방식은 텍스트를 svg- 배경으로 삽입하는 것입니다. 그것은 약간의 유연성을 허용하며, 내가 읽은 브라우저 지원은 상당히 괜찮을 것입니다 (그래도 테스트하지는 않았습니다).

  • 크롬> = 27
  • FireFox> = 30
  • Internet Explorer> = 9
  • Safari> = 5.1

html :

<iframe class="iframe-placeholder" src=""></iframe>

css :

.iframe-placeholder
{
   background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;
}

무엇을 바꿀 수 있습니까?

배경 값 내부 :

  • 글꼴 크기 : font-size = “” 를 찾아 원하는 값으로 변경하십시오.

  • 글꼴 색상 : fill = “”을 찾습니다 . 16 진수 색상 표기법을 사용하는 경우 #을 % 23으로 바꾸는 것을 잊지 마십시오. % 23은 svg- 문자열이 FireFox에서 구문 분석 될 수 있도록하는 데 필요한 URL 인코딩의 #을 나타냅니다.

  • font-family : look for font-family = “” 여러 단어로 구성된 글꼴이있는 경우 작은 따옴표를 이스케이프해야합니다 (예 : \ ‘Lucida Grande \’).

  • text : PLACEHOLDER 문자열 이있는 텍스트 요소의 요소 값을 찾습니다 . PLACEHOLDER 문자열을 URL을 준수하는 모든 문자열로 바꿀 수 있습니다 (특수 문자는 백분율 표기법으로 변환해야 함).

바이올린의 예

장점 :

  • 추가 HTML 요소 없음
  • js 없음
  • 텍스트는 외부 프로그램없이 쉽게 (…) 조정할 수 있습니다.
  • SVG이므로 원하는 SVG를 쉽게 넣을 수 있습니다.

단점 :

  • 브라우저 지원
  • 복잡하다
  • 해키
  • iframe-src에 배경이 설정되어 있지 않으면 자리 표시자가 빛을 발합니다 (이 방법은 고유하지 않지만 iframe에서 bg를 사용할 때의 표준 동작).

약간의 유연성 (다국어 등)이 필요한 iframe에서 텍스트를 자리 표시 자로 표시해야하는 경우에만 이것을 권장합니다. 잠시 시간을내어 생각해보십시오.이 모든 것이 정말 필요한가요? 선택권이 있다면 @Christina의 방법으로 갈 것입니다.

답변

$('iframe').load(function(){
      $(".loading").remove();
    alert("iframe is done loading")
}).show();


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/>
<div class="loading" style="width:600px;height:300px;">iframe loading</div>

답변

다음은 대부분의 경우에 대한 빠른 솔루션입니다.

CSS :

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

원하는 경우 애니메이션 로딩 GIF를 사용할 수 있습니다.

HTML :

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

onload 이벤트를 사용하면 소스 페이지가 iframe 내에로드 된 후로드 이미지를 제거 할 수 있습니다.

jQuery를 사용하지 않는 경우 div에 ID를 입력하고 다음 코드 부분을 바꿉니다.

$('.iframe-loading').css('background-image', 'none');

다음과 같이 :

document.getElementById("myDivName").style.backgroundImage = "none";

모두 제일 좋다!

답변

예, iframe 영역 위에 배치 된 투명한 div를 사용할 수 있으며 로더 gif를 배경으로 만 사용할 수 있습니다.

그런 다음 onloadiframe에 이벤트를 첨부 할 수 있습니다 .

 $(document).ready(function() {

   $("iframe#id").load(function() {
      $("#loader-id").hide();
   });
});

답변

나는 다음 접근 방식을 따랐다

먼저 형제 div 추가

$('<div class="loading"></div>').insertBefore("#Iframe");

그런 다음 iframe이로드를 완료하면

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove();
  });