iFrame이로드 될 때로드 메시지를 표시하는 방법은 무엇입니까?
로드 속도가 매우 느린 타사 웹 사이트를로드하는 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를 사용할 때의 표준 동작).
I would only recommend this only if it's absolutely necessary to show text as a placeholder in an iframe which requires a little bit of flexbility (multiple languages, ...). Just take a moment and reflect on it: is all this really necessary? If I had a choice, I'd go for @Christina's method
$('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>
Here's a quick solution for most of the cases:
CSS:
.iframe-loading {
background:url(/img/loading.gif) center center no-repeat;
}
You can use an animated loading GIF if you want to,
HTML:
<div class="iframe-loading">
<iframe src="http://your_iframe_url_goes_here" onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>
Using the onload event you can remove the loading image after the source page is loaded inside your iframe.
If you are not using jQuery, just put an id into the div and replace this part of code:
$('.iframe-loading').css('background-image', 'none');
by something like this:
document.getElementById("myDivName").style.backgroundImage = "none";
All the best!
Yes, you could use a transparent div positioned over the iframe area, with a loader gif as only background.
Then you can attach an onload event to the iframe:
$(document).ready(function() {
$("iframe#id").load(function() {
$("#loader-id").hide();
});
});
<!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>
You can use as below
$('#showFrame').on("load", function () {
loader.hide();
});
I have followed the following approach
First, add sibling div
$('<div class="loading"></div>').insertBefore("#Iframe");
and then when the iframe completed loading
$("#Iframe").load(function(){
$(this).siblings(".loading-fetching-content").remove();
});
참고URL : https://stackoverflow.com/questions/8626638/how-to-display-loading-message-when-an-iframe-is-loading
'program tip' 카테고리의 다른 글
| Int를 부호없는 바이트로 변환하고 그 반대로 변환하는 방법 (0) | 2020.09.13 |
|---|---|
| UITabBar의 색조 / 배경색 변경 (0) | 2020.09.13 |
| PHP의 mysql 테이블에서 count (*)를 선택하십시오. (0) | 2020.09.13 |
| Angular.js : .value ()는 앱 전체 상수를 설정하는 적절한 방법이며 컨트롤러에서 검색하는 방법입니다. (0) | 2020.09.12 |
| LESS에 "확장"기능이 있습니까? (0) | 2020.09.12 |