페이지 내에서 PDF를로드해야합니다.
이상적으로는 PDF가로드되면 대체되는 로딩 애니메이션 gif를 갖고 싶습니다.
페이지 내에서 PDF를로드해야합니다.
이상적으로는 PDF가로드되면 대체되는 로딩 애니메이션 gif를 갖고 싶습니다.
답변:
시도해 보셨습니까?
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})프레임이 먼저로드되도록 내부를 사용하고 있습니다 . 그러나 희망하는 결과를 얻지 못하고 있습니다. Chrome 25 Mac
이것은 나를 위해 해냈습니다 (pdf가 아니라 또 다른 " onload저항"내용).
<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
iframe = document.getElementById("frameid");
WaitForIFrame();
function WaitForIFrame() {
if (iframe.readyState != "complete") {
setTimeout("WaitForIFrame();", 200);
} else {
done();
}
}
function done() {
//some code after iframe has been loaded
}
</script> 도움이 되었기를 바랍니다.
setTimeout(WaitForIFrame, 200);
나는 이것을 시도하고 있고 나를 위해 일하는 것 같습니다 : http://jsfiddle.net/aamir/BXe8C/
더 큰 pdf 파일 : http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...했지만 작동하지 않았지만 유지 되었지만 페이지를 새로 고쳤을 때 PDF Loaded!. 그러나 이것은 URL과 함께 작동하는 것 같습니다 :) 그래서 그것은 나에게 매우 유용합니다. 감사!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});대신 .ready를 시도 했습니까?
나는 이것에 대한 즉각적인 접근 방식을 시도했지만 PDF 콘텐츠에 대해서는 테스트하지 않았지만 일반 HTML 기반 콘텐츠에 대해서는 작동했습니다. 방법은 다음과 같습니다.
1 단계 : Iframe을 div 래퍼로 래핑
2 단계 : div 래퍼에 배경 이미지를 추가합니다.
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}3 단계 : iframe 태그 추가 ALLOWTRANSPARENCY="false"
아이디어는 iframe이로드 된 후 iframe이로드 애니메이션을 덮을 때까지 래퍼 div에로드 애니메이션을 표시하는 것입니다.
시도 해봐.
@Alex aw 그거 부끄럽다. 다음 iframe과 같은 html 문서가 있다면 어떨까요?
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>확실히 해킹이지만 Firefox에서는 작동 할 수 있습니다. 이 경우 load 이벤트가 너무 빨리 시작되는지 궁금합니다.
iFrame의 pdf가로드되는 동안 로더를 표시해야 했으므로 다음과 같은 결과를 얻었습니다.
loader({href:'loader.gif', onComplete: function(){
$('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
}
});로더를 보여주고 있습니다. 고객이 내 로더를 볼 수 있다고 확신하면 iframe을로드하는 onCompllet 로더 메서드를 호출합니다. Iframe에는 "onLoad"이벤트가 있습니다. PDF가로드되면 로더를 숨기고있는 onloat 이벤트가 트리거됩니다. :)
중요한 부분 :
iFrame에는 필요한 작업을 수행 할 수있는 "onLoad"이벤트가 있습니다 (로더 숨기기 등).
모든 작업에 대해 수행하는 작업은 다음과 같습니다. Firefox, IE, Opera 및 Safari에서 작동합니다.
<script type="text/javascript">
$(document).ready(function(){
doMethod();
});
function actionIframe(iframe)
{
... do what ever ...
}
function doMethod()
{
var iFrames = document.getElementsByTagName('iframe');
// what ever action you want.
function iAction()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
actionIframe(iFrames[i]);
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iAction, 0);
}
);
// Safari and Opera need something to force a load.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
actionIframe(this);
}
);
}
}
</script>pdf 파일이로드 된 후 iframe 문서에 새 DOM 요소 <embed/>가 있으므로 다음과 같이 확인할 수 있습니다.
window.onload = function () {
//creating an iframe element
var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
// making the iframe fill the viewport
ifr.width = '100%';
ifr.height = window.innerHeight;
// continuously checking to see if the pdf file has been loaded
self.interval = setInterval(function () {
if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
clearInterval(self.interval);
console.log("loaded");
//You can do print here: ifr.contentWindow.print();
}
}, 100);
ifr.src = src;
}이 상황에 적용한 솔루션은 DOM에 절대 로딩 이미지를 배치하는 것입니다.이 이미지는 iframe이로드 된 후 iframe 레이어에 포함됩니다.
iframe의 Z- 색인은 (로드 중 Z- 색인 + 1) 이상이어야합니다.
예를 들면 :
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }자바 스크립트 솔루션이 없다면 도움이되기를 바랍니다. CSS가 이러한 상황에 가장 적합하다고 생각합니다.
친애하는.