Я повинен завантажити PDF-файл на сторінці.
В ідеалі я хотів би мати завантажувальний анімований gif, який замінюється після завантаження PDF.
Я повинен завантажити PDF-файл на сторінці.
В ідеалі я хотів би мати завантажувальний анімований gif, який замінюється після завантаження PDF.
Відповіді:
Я майже впевнений, що цього зробити неможливо.
Майже що завгодно, окрім PDF-файлів, навіть Flash. (Протестовано на Safari, Firefox 3, IE 7)
Дуже погано.
Ти намагався:
$("#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
});
ви пробували. вже замість цього?
Я спробував нестандартний підхід до цього, я не перевіряв це для вмісту 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 ur ALLOWTRANSPARENCY="false"
Ідея полягає в тому, щоб показати анімацію завантаження в обгортці div, доки iframe не завантажиться після того, як iframe завантажить анімацію завантаження.
Спробувати.
Використання як jquery Load, так і Ready, здавалося, не відповідало справді, коли iframe був ІСТИННО готовим.
У підсумку я зробив щось подібне
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
Де #loader - це абсолютно позиціонований div над вершиною iframe із зображенням обертання.
@Alex aw, це облом. Що, якби у вас у iframeвас був HTML-документ, який виглядав так:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
Безумовно, хак, але це може працювати для Firefox. Хоча мені цікаво, чи не запуститься подія навантаження в такому випадку занадто рано.
Мені довелося показати завантажувач, поки завантажується pdf в iFrame, так що я придумав:
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>');
}
});
Я показую навантажувач. Після того, як я впевнений, що клієнт може побачити мій завантажувач, я закликаю метод навантажувачівCompllet, який завантажує iframe. 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>Якщо ви можете очікувати, що інтерфейс відкритого / збереженого браузера з’явиться для користувача після завершення завантаження, тоді ви можете запустити це, починаючи завантаження:
$( document ).blur( function () {
// Your code here...
});Коли діалог з’явиться у верхній частині сторінки, спрацює подія розмиття.
Оскільки після завантаження 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.
Z-індекс iframe повинен бути (z-індекс завантаження + 1) або просто вищим.
Наприклад:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }Сподіваюся, це допоможе, якщо жодне рішення javaScript не зробило. Я думаю, що CSS - найкраща практика для таких ситуацій.
З найкращими побажаннями.