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

107

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

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

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

javascript  jquery  iframe 
— Jacob
소스
네, iframe에 대한 진행 콜백을 알지 못합니다 ... 흠.
— Jeffrey Sweeney 2011

답변:

231

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

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

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}
— 크리스티나
소스
1
이것은 제 경우에 완벽하게 작동했습니다. 탭을 클릭 할 때만 iFrame을로드했기 때문에 선택한 답변이 작동하지 않았습니다. 그러나 이것은 iFrame 소스를로드하는 동안 우아하게 표시되었습니다. 야곱이 jQuery를 솔루션을 요구하기 때문에 그러나 너무 나쁜이 답으로 선택되지 않았 음을 ...
— dance2die
21
로드중인 iframe의 배경이 투명한 경우 제대로 작동하지 않습니다. iframe이로드되면 로딩 gif를 볼 수 있습니다!
— Westy92 2015 년
3
@Christna이 트릭은 IE-11에서 작동하지 않습니다. 해킹이 있습니까?
— mmuzahid
3
iframe onload 기능을 사용하면 CSS 배경 이미지를 제거 할 수 있습니다.
— Hugo Cox
1
좋은 대답입니다. 효과가있다. 로더가 쉽게 보이도록 높이를 추가하는 것이 좋습니다.
— Raz
33

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

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;
}
— 민코 게 체프
소스
난 당신이 왜 불이 #loadingMessage났을 때 숨는 지는 이해합니다 load. 그런데 왜 숨는 거죠 ready? 너무 이르지 않나요?
— teedyay
1
사용자의 요구에 따라 다릅니다. 로드 메시지를 숨기기 전에 모든 이미지를로드 할 필요가 없다면로드 중 콜백이 필요하지 않습니다.
— Minko Gechev 2012-07-25
9
jquery는 "JS"가 아닙니다.
— OZ_ 2015 년
5
@OZ_ + s 속성 을 사용 addEventListener하고 사용 하여 위의 코드를 바닐라 자바 ​​스크립트로 바꾸는 것은 어렵지 않습니다 . :-). 또한 질문의 작성자는 . 왜 메시지를 받았는지 알 수 없습니까? :-)querySelectorstylejquery
— Minko Gechev
17

달성하려는 자리 표시 자일 경우 : 미친 접근 방식은 텍스트를 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의 방법으로 갈 것입니다.

— Pascalculator
소스
5 
$('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>
— 소금 토끼
소스
페이지에 jQuery가 없을 수 있으므로 타사 웹 사이트에로드되는 iframe에 대해 반드시 좋은 솔루션은 아닙니다.
— Luke
4

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

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";

모두 제일 좋다!

— 데이비드 톨레도
소스
2

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

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

 $(document).ready(function() {

   $("iframe#id").load(function() {
      $("#loader-id").hide();
   });
});
— 맥시 브
소스
1

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

먼저 형제 div 추가

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

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

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });
— Gaurav
소스
0 
<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>
— Romi
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.