Geek Answers Handbook

Iframe onload does not work when url generates pdf output

I have one url that creates a pdf file. To create a PDF, I use an iframe to load this URL and create a PDF file on the same page for users.

When the user presses a button, a loader will be displayed on the screen. and it should be hidden when the iframe download is complete (when loading a PDF file). I used the code below, but it doesn’t work, the loader remains showing after the popup popup (if I change the URL with any other, for example google.com, then it will work).

Here is my code snippet.

 $("#test").click(function(){ iframe = document.getElementById("download-container1"); if (iframe === null) { $("#ajax_loading").show(); var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile"; iframe = document.createElement('iframe'); iframe.id = "download-container1"; document.body.appendChild(iframe); $('#download-container1').load(function () { $("#ajax_loading").hide(); }); iframe.src=url; } }); 
 .ajax_loading { background-color: rgba(0, 0, 0, 0.7); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99999; } 
 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="ajax_loading" id="ajax_loading"><span>Please Wait... Loading</span></div> <button id="test">click</button> </body> </html>

When the iframe fully loaded, you need to hide the ajax_loading div. Am I doing something wrong here? is there any other solution?

Thanks in advance.

+5
source share
1 answer

You can use the readystate iframe property to check if the iframe is fully loaded. However, this does not work in Chrome if the content is a binary.

Once the iframe url is set, it checks the readramate iframe property every second:

 $("#test").click(function(){ iframe = document.getElementById("download-container1"); if (iframe === null) { $("#ajax_loading").show(); var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile"; iframe = document.createElement('iframe'); iframe.id = "download-container1"; document.body.appendChild(iframe); //$('#download-container1').load(function () { // $("#ajax_loading").hide(); //}); iframe.src=url; checkFinishedDownload(iframe); } }); function checkFinishedDownload(ifr) { if (ifr.readyState == "complete" || ifr.readyState == "interactive") { // Here hide the spinner $("#ajax_loading").hide(); } else { setTimeout(function () { checkFinishedDownload(ifr); }, 1000); } } }

Check my question: Iframe.readyState not working in chrome

EDIT: In firefox, you can use the onload :

 function checkFinishedDownload(ifr) { if ($.browser.mozilla) { ifr.onload = function () { $("#ajax_loading").hide(); } }else{ iframeCheck(ifr); } } function iframeCheck(iframe){ if (iframe.readyState == "complete" || iframe.readyState == "interactive") { // Here hide the spinner $("#ajax_loading").hide(); } else { setTimeout(function () { checkFinishedDownload(iframe); }, 1000); } }
0
source

More articles:


All Articles