मुझे एक पृष्ठ के भीतर एक पीडीएफ लोड करना है।
आदर्श रूप में मैं एक लोडिंग एनिमेटेड जिफ लेना चाहूंगा जो पीडीएफ लोड होने के बाद बदल दिया जाता है।
मुझे एक पृष्ठ के भीतर एक पीडीएफ लोड करना है।
आदर्श रूप में मैं एक लोडिंग एनिमेटेड जिफ लेना चाहूंगा जो पीडीएफ लोड होने के बाद बदल दिया जाता है।
जवाबों:
मुझे पूरा यकीन है कि यह नहीं किया जा सकता है।
पीडीएफ के अलावा बहुत कुछ और भी काम करता है, यहां तक कि फ्लैश भी। (सफारी, फ़ायरफ़ॉक्स 3, आईई 7 पर परीक्षण किया गया)
बहुत बुरा।
आपने कोशिश की है:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})ताकि फ्रेम पहले लोड हो जाए। लेकिन परिणाम के लिए उम्मीद नहीं की जा रही है। क्रोम 25 मैक
यह मेरे लिए था (पीडीएफ नहीं, लेकिन एक और " 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/
बड़ी पीडीएफ फाइल: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...लेकिन जब मैंने पृष्ठ को ताज़ा किया, तो कहा PDF Loaded!। लेकिन यह यूआरएल के साथ काम करने लगता है :) इसलिए यह मेरे लिए बहुत उपयोगी है। धन्यवाद!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});क्या आपने पहले से ही इसके बजाय कोशिश की है?
मैंने इसके लिए आउट ऑफ बॉक्स अप्रोच की कोशिश की, मैंने इसे पीडीएफ कंटेंट के लिए टेस्ट किया, लेकिन इसने सामान्य HTML आधारित कंटेंट के लिए काम किया।
चरण 1 : एक तलाक आवरण में अपने आइफ्रेम लपेटें
चरण 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"
आइफ्रेम लोड होने के बाद रैपर डिप में लोडिंग एनीमेशन को दिखाने का विचार है, अगर यह लोड हो रहा है तो आइफ्रेम लोडिंग एनीमेशन को कवर करेगा।
कोशिश करो।
Jquery लोड और रेडी दोनों का उपयोग करना न तो वास्तव में मेल खाता था जब आइफ्रेम ट्रूली तैयार था।
मैंने इस तरह से कुछ करना समाप्त कर दिया
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});जहाँ # लोडर एक स्पिनर जिफ़ के साथ iframe के ऊपर एक पूरी तरह से स्थित div है।
@ ऐक्स अवे जो कि एक बुमर है। क्या होगा अगर आपके iframeपास एक HTML दस्तावेज़ था जो जैसा दिखता था:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>निश्चित रूप से एक हैक, लेकिन यह फ़ायरफ़ॉक्स के लिए काम कर सकता है। हालांकि मुझे आश्चर्य है कि अगर लोड घटना उस मामले में भी जल्द ही आग लग जाएगी।
मुझे लोडर दिखाना था जबकि 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>');
}
});मैं एक लोडर दिखा रहा हूँ। एक बार मुझे यकीन है कि ग्राहक मेरे लोडर को देख सकता है, मैं onCompllet लोडर विधि को कॉल कर रहा हूं जो एक iframe लोड करता है। Iframe में एक "onLoad" ईवेंट है। एक बार PDF लोड होने के बाद यह onloat इवेंट को ट्रिगर करता है जहाँ मैं लोडर को छिपा रहा हूँ :)
महत्वपूर्ण हिस्सा:
iFrame में "onLoad" ईवेंट है जहां आप वह कर सकते हैं जो आपको चाहिए (लोडर्स को छिपाएं आदि)
यहाँ मैं किसी भी कार्रवाई के लिए क्या कर रहा हूँ और यह फ़ायरफ़ॉक्स, IE, ओपेरा और सफारी में काम करता है।
<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...
});जब संवाद पृष्ठ के शीर्ष पर पॉप होता है, तो धब्बा घटना ट्रिगर हो जाएगी।
चूंकि पीडीएफ फाइल लोड होने के बाद, 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;
}इस स्थिति के लिए मैंने जो समाधान लागू किया है वह है डोम में बस एक निरपेक्ष लोडिंग छवि को रखना, जो कि iframe लोड होने के बाद iframe लेयर द्वारा कवर किया जाएगा।
Iframe का z-index होना चाहिए (लोडिंग का z-index + 1), या उससे अधिक होना चाहिए।
उदाहरण के लिए:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }आशा है कि यह मदद करता है अगर कोई javaScript समाधान नहीं किया। मुझे लगता है कि सीएसएस इन स्थितियों के लिए सबसे अच्छा अभ्यास है।
सादर।