আমি একটি পৃষ্ঠার মধ্যে একটি পিডিএফ লোড করতে হবে।
আদর্শভাবে আমি একটি লোডিং অ্যানিমেটেড জিআইএফ রাখতে চাই যা পিডিএফটি লোড হয়ে গেলে প্রতিস্থাপন করা হয়।
আমি একটি পৃষ্ঠার মধ্যে একটি পিডিএফ লোড করতে হবে।
আদর্শভাবে আমি একটি লোডিং অ্যানিমেটেড জিআইএফ রাখতে চাই যা পিডিএফটি লোড হয়ে গেলে প্রতিস্থাপন করা হয়।
উত্তর:
আমি বেশ নিশ্চিত যে এটি করা যাবে না।
পিডিএফ, এমনকি ফ্ল্যাশ ছাড়াও খুব সুন্দর অন্য কিছু কাজ করে। (সাফারি, ফায়ারফক্স 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
});
আপনি চেষ্টা করেছেন। পরিবর্তে প্রস্তুত?
আমি এটির কাছে বক্স পদ্ধতির বাইরে গিয়ে চেষ্টা করেছি, আমি পিডিএফ বিষয়বস্তুর জন্য এটি পরীক্ষা করে দেখিনি তবে এটি সাধারণ এইচটিএমএল ভিত্তিক সামগ্রীর জন্য কাজ করেছে, কীভাবে এখানে:
পদক্ষেপ 1 : আপনার ইফ্রেমে একটি ডিভ র্যাপারে আবদ্ধ করুন
পদক্ষেপ 2 : আপনার ডিভ র্যাপারে একটি পটভূমি চিত্র যুক্ত করুন:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}
পদক্ষেপ 3 : আপনার ইফ্রেমে ট্যাগ যুক্ত করুন ALLOWTRANSPARENCY="false"
ধারণাটি হ'ল মোড়ক ডিভিতে লোডিং অ্যানিমেশনটি আইফ্রেমে লোড হওয়ার পরে আইফ্রেমে লোড হওয়ার পরে অ্যানিমেশনটি coverেকে দেবে till
একবার চেষ্টা করে দেখো.
Jquery লোড এবং রেডি উভয়ই ব্যবহার করা যখন ইফ্রেমটি সত্যই প্রস্তুত তখন সত্যিই মিলবে বলে মনে হয় নি।
আমি এরকম কিছু করে শেষ করেছি
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
যেখানে # লোডার স্পিনার জিআইএফ সহ আইফ্রেমে শীর্ষে একেবারে অবস্থিত ডিভ।
@ অ্যালেক্স ওভ! আপনার iframeযদি এমন কোনও এইচটিএমএল নথি থাকে যা দেখে মনে হয়:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
অবশ্যই একটি হ্যাক, তবে এটি ফায়ারফক্সের জন্য কাজ করতে পারে। যদিও আমি ভাবছি যদি লোড ইভেন্টটি খুব শীঘ্রই সেই ক্ষেত্রে চালু হয়।
আইফ্রেমে পিডিএফ লোড হওয়ার সময় আমাকে একটি লোডার দেখাতে হয়েছিল তাই আমি কী নিয়ে আসছি:
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>');
}
});
আমি একটি লোডার দেখাচ্ছে একবার আমি নিশ্চিত হয়েছি যে গ্রাহকটি আমার লোডারটি দেখতে পাবে, আমি কল করছি কমপ্লিট লোডার পদ্ধতিতে যা একটি আইফ্রেম লোড করে। ইফরামের একটি "অনলয়েড" ইভেন্ট রয়েছে। পিডিএফটি লোড হয়ে গেলে এটি অনিয়মিত ইভেন্টে ট্রিগার করে যেখানে আমি লোডারটি আড়াল করছি :)
গুরুত্বপূর্ণ অংশ:
আইফ্রেমে "অনলোড" ইভেন্ট রয়েছে যেখানে আপনি যা প্রয়োজন তা করতে পারেন (লোডারগুলি আড়াল করুন ইত্যাদি)
এখানে আমি যে কোনও ক্রিয়াকলাপের জন্য যা করি তা এটি ফায়ারফক্স, আইই, অপেরা এবং সাফারিতে কাজ করে।
<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>
যেহেতু পিডিএফ ফাইল লোড হওয়ার পরে, 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;
}
এই পরিস্থিতিতে আমি যে সমাধানটি প্রয়োগ করেছি তা হ'ল ডিওমে একটি নিখুঁত লোডিং ইমেজ স্থাপন করা যা আইফ্রেমে লোড হওয়ার পরে যদি আইফ্রেমে স্তরটি beেকে যাবে।
ইফ্রেমের জেড-ইনডেক্সটি (লোডিংয়ের জেড-ইনডেক্স + 1), বা আরও বেশি হওয়া উচিত।
উদাহরণ স্বরূপ:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
আশা করি কোনও জাভা স্ক্রিপ্ট সমাধান না করলে এটি সহায়তা করে। আমি মনে করি যে সিএসএস এই পরিস্থিতিতে সবচেয়ে ভাল অনুশীলন।
শুভেচ্ছান্তে.