Tôi phải tải một tệp PDF trong một trang.
Lý tưởng nhất là tôi muốn có một gif động đang tải được thay thế sau khi tải xong PDF.
Tôi phải tải một tệp PDF trong một trang.
Lý tưởng nhất là tôi muốn có một gif động đang tải được thay thế sau khi tải xong PDF.
Câu trả lời:
Tôi khá chắc chắn rằng nó không thể được thực hiện.
Khá nhiều thứ khác ngoài PDF hoạt động, ngay cả Flash. (Đã thử nghiệm trên Safari, Firefox 3, IE 7)
Quá tệ.
Bạn đã thử chưa:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})để khung tải đầu tiên. Nhưng tôi không nhận được hy vọng cho kết quả. Chrome 25 Mac
Điều này đã làm điều đó cho tôi (không phải pdf, mà là một onloadnội dung "kháng" khác):
<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> Hi vọng điêu nay co ich.
setTimeout(WaitForIFrame, 200);
Tôi đang thử điều này và dường như đang làm việc cho tôi: http://jsfiddle.net/aamir/BXe8C/
Tệp pdf lớn hơn: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...nhưng khi tôi làm mới trang, cho biết PDF Loaded!. Nhưng điều này dường như hoạt động với url :) vì vậy nó rất hữu ích với tôi. Cảm ơn!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});bạn đã thử. Thay vào đó?
Tôi đã thử một cách tiếp cận khác cho điều này, tôi đã không thử nghiệm điều này cho nội dung PDF nhưng nó hoạt động cho nội dung dựa trên HTML thông thường, đó là cách thực hiện:
Bước 1 : Gói Iframe của bạn trong một trình bao bọc div
Bước 2 : Thêm hình nền vào trình bao bọc div của bạn:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}Bước 3 : Thêm thẻ iframe trong bạn ALLOWTRANSPARENCY="false"
Ý tưởng là hiển thị hoạt ảnh đang tải trong div trình bao bọc cho đến khi iframe tải sau khi tải xong iframe sẽ che hoạt ảnh tải.
Hãy thử một lần.
Việc sử dụng cả jquery Load và Ready dường như không thực sự phù hợp khi iframe đã sẵn sàng TRULY.
Tôi đã kết thúc một việc như thế này
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});Trong đó #loader là một div được định vị tuyệt đối trên iframe với gif spinner.
@Alex aw thật là một kẻ ngu ngốc. Điều gì sẽ xảy ra nếu trong iframebạn có một tài liệu html giống như sau:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Chắc chắn là một vụ hack, nhưng nó có thể hoạt động với Firefox. Mặc dù tôi tự hỏi liệu sự kiện tải có xảy ra quá sớm trong trường hợp đó hay không.
Tôi đã phải hiển thị trình tải khi pdf trong iFrame đang tải, vì vậy tôi nghĩ ra gì:
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>');
}
});Tôi đang hiển thị một bộ tải. Khi tôi chắc chắn rằng khách hàng có thể thấy trình tải của tôi, tôi đang gọi phương thức trình tải onCompllet tải iframe. Iframe có sự kiện "onLoad". Khi PDF được tải, nó sẽ kích hoạt sự kiện onloat mà tôi đang ẩn trình tải :)
Phần quan trọng:
iFrame có sự kiện "onLoad" nơi bạn có thể làm những gì bạn cần (ẩn trình tải, v.v.)
Đây là những gì tôi làm cho bất kỳ hành động nào và nó hoạt động trên Firefox, IE, Opera và 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>Nếu bạn có thể mong đợi giao diện mở / lưu của trình duyệt bật lên cho người dùng sau khi quá trình tải xuống hoàn tất, thì bạn có thể chạy điều này khi bắt đầu tải xuống:
$( document ).blur( function () {
// Your code here...
});Khi hộp thoại bật lên trên đầu trang, sự kiện mờ sẽ kích hoạt.
Vì sau khi tệp pdf được tải, tài liệu iframe sẽ có phần tử DOM mới <embed/>, vì vậy chúng tôi có thể thực hiện kiểm tra như sau:
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;
}Giải pháp mà tôi đã áp dụng cho tình huống này là chỉ cần đặt một hình ảnh tải tuyệt đối vào DOM, hình ảnh này sẽ được phủ bởi lớp iframe sau khi iframe được tải.
Chỉ số z của iframe phải là (chỉ số z của tải + 1) hoặc cao hơn.
Ví dụ:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }Hy vọng điều này sẽ giúp ích nếu không có giải pháp javaScript nào. Tôi nghĩ rằng CSS là phương pháp hay nhất cho những trường hợp này.
Trân trọng.