ページ内にPDFをロードする必要があります。
理想的には、PDFが読み込まれると置き換えられるアニメーションGIFを読み込みたいです。
ページ内にPDFをロードする必要があります。
理想的には、PDFが読み込まれると置き換えられるアニメーションGIFを読み込みたいです。
回答:
それができないことは確かです。
Flashでさえ、PDF以外のほとんどのものが機能します。（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!。しかし、これはurlsで動作するようです:)それは私にとって非常に便利です。ありがとう！
$("#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：ur 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-indexは（loadingのz-index + 1）以上である必要があります。
例えば：
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }これがjavaScriptソリューションでうまくいかなかった場合に役立つことを願っています。CSSはこれらの状況でのベストプラクティスだと思います。
宜しくお願いします。