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
- 파이어폭스 >= 30
- Internet Explorer >= 9
- 사파리 >= 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;
}
무엇을 바꿀 수 있습니까?
배경 값 내부:
글꼴 크기: 글꼴 크기=""를 찾아 원하는 대로 값을 변경할 수 있습니다.
글꼴 색상: fill=""을 찾습니다.16진수 색상 표기법을 사용하는 경우 #를 %23으로 바꾸는 것을 잊지 마십시오. %23은 svg 문자열을 FireFox에서 구문 분석하는 데 필요한 URL 인코딩의 #를 나타냅니다.
font family: font-family를 찾아보세요="" 여러 단어로 구성된 글꼴이 있는 경우(예: \'Lucida Grande\') 작은 따옴표를 피해가도록 기억하세요.
text: PLACEHOLDER 문자열이 표시되는 텍스트 요소의 요소 값을 찾습니다.PLACEHOLDER 문자열을 url 호환되는 모든 문자열로 바꿀 수 있습니다(특수 문자를 백분율 표기법으로 변환해야 함).
장점:
- 추가 HTML 요소 없음
- 아니요 js
- 외부 프로그램 없이 텍스트를 쉽게(...) 조정할 수 있습니다.
- SVG라서 원하는 SVG를 손쉽게 넣을 수 있습니다.
단점:
- 브라우저 지원
- 복잡합니다.
- 까칠까칠해요.
- iframe-src에 배경 세트가 없는 경우 자리 표시자가 다음을 통해 빛납니다(이 메서드는 이 메서드에 고유한 것이 아니라 iframe에서 bg를 사용할 때 표준 동작일 뿐입니다).
약간의 유연성이 필요한 iframe에서 텍스트를 자리 표시자로 표시해야 하는 경우에만 이를 권장합니다(다국어, ...).잠시 시간을 갖고 생각해 보세요: 이 모든 것이 정말로 필요한가요?선택의 여지가 있다면 @크리스티나의 방법을 택할 겁니다.
대안적인 해결책.
<iframe srcdoc="Loading..." onload="this.removeAttribute('srcdoc')" src="https://example.com"></iframe>
srcdoc 속성은 HTML 마크업을 가질 수 있습니다.따라서 사용자 지정 스타일을 메시지에 적용할 수 있습니다.
<iframe id="example" src="https://example.com"></iframe>
<script>
const iframe = document.getElementById('example');
iframe.srcdoc = '<!DOCTYPE html><p style="color: green;">Loading...</p>';
iframe.addEventListener('load', () => iframe.removeAttribute('srcdoc'));
</script>
대부분의 경우에 대한 빠른 해결책은 다음과 같습니다.
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>
소스 페이지가 iframe 내부에 로드된 후 onload 이벤트를 사용하여 로딩 이미지를 제거할 수 있습니다.
jQuery를 사용하지 않는 경우 div에 id를 입력하고 코드의 다음 부분을 바꿉니다.
$('.iframe-loading').css('background-image', 'none');
다음과 같은 방법으로.
document.getElementById("myDivName").style.backgroundImage = "none";
좋은 일만 가득하시길요!
$('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>
예, iframe 영역 위에 위치한 투명한 div를 사용할 수 있으며, loader gif만 배경으로 사용할 수 있습니다.
그러면 당신은 다음을 첨부할 수 있습니다.onloadiframe에:
$(document).ready(function() {
$("iframe#id").load(function() {
$("#loader-id").hide();
});
});
아래 코드를 이용하시면 됩니다.
iframe {background:url(../images/loader.gif) center center no-repeat; height: 100%;}
저는 다음과 같은 접근법을 따라왔습니다.
먼저 형제 div를 추가합니다.
$('<div class="loading"></div>').insertBefore("#Iframe");
iframe이 로딩을 완료했을 때
$("#Iframe").load(function(){
$(this).siblings(".loading-fetching-content").remove();
});
<!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>
아래와 같이 사용 가능합니다.
$('#showFrame').on("load", function () {
loader.hide();
});
언급URL : https://stackoverflow.com/questions/8626638/how-to-display-loading-message-when-an-iframe-is-loading
'programing' 카테고리의 다른 글
| div에서 클래스의 첫 번째 출현을 찾습니다. (0) | 2023.09.13 |
|---|---|
| 자바스크립트로 팝업을 열고 사용자가 언제 닫는지 감지할 수 있습니까? (0) | 2023.09.13 |
| SQL many to many select (0) | 2023.09.13 |
| 하나의 선택 문에서 두 열을 정렬하는 데 도움이 필요합니다. (0) | 2023.09.13 |
| MariaDB 데이터베이스에서 권한 부여 (0) | 2023.09.13 |