refresh iframe after downloading a blob

Question

I have a filebrowser on my server that uses Azure storage to store the files. The website has a feature where when you click on a file, it'll bring up a details window. I use ViewerJS to display a pdf preview of the file (if applicable), and it all works pretty well. The only problem is that when downloading the preview file, you have to reload the preview iframe manually to get it to display. The relevant php function is:
http://pastebin.com/sAyhsbfi
When this function is completed (I'm using ajax), the $.done function calls
response = JSON && JSON.parse(response) || jQuery.parseJSON(response); $scope.pdfthingy=response; document.getElementById("viewerjs_preview").contentDocument.location.reload(true);
where response on the first line is set to the full pathname to the pdf preview file, and viewerjs_preview is the id of the relevant iframe.
For some reason, this isn't working, and the iframe isn't reloading itself. How do I make it do that when the blob has finished downloading, and pdfthingy is set?

Hi, and welcome to StackOverflow! So, what did you try so far to solve your issue? What exact error you observe? Please understand (http://stackoverflow.com/help/asking) that StackOverflow is not a place to ask questions "how do I ...?". — astaykov, Jun 10 '15 at 21:01

score 0 · Answer 1 · edited May 23 '17 at 12:22

Is the iframe’s domain the same as your host website’s domain? If not, we cannot access its contentDocument (or contentWindow) in host website’s JavaScript code.

To refresh the iframe, per my understanding you can set its src:

document.getElementById('viewerjs_preview').src = document.getElementById('viewerjs_preview').src;

Please note if the src contains a hash tag, we may need additional work. I’d like to suggest you to check What's the best way to reload / refresh an iframe using JavaScript? for more information.

score 0 · Answer 2 · 2015-06-11T11:24:15.277

Base on my experience, It is possible that we changed the IFrame URL, but the IFrame showed the preview contents. In this scenario, I suggest you can create the IFarme dynamic. For example, When you got the Blob URI form Azure storage, You could try to remove the Iframe and create a new. For instance, if Your preview content is shown in the iframe as :

<iframe id="viewerjs_preview" src = "/ViewerJS/#../azure blob storage url /pre-blobname .pdf " width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

You can try to use this code:

function recreateIFM() {
            document.getElementById("viewerjs_preview").parentNode.removeChild(document.getElementById("viewerjs_preview"));
            var ifm = document.createElement("iframe");
            ifm.id = "viewerjs_preview";
            ifm.width = "600px";
            ifm.height = "400px";
            ifm.src = "/ViewerJS/#../azure blob storage url /new-blobname .pdf";
            document.body.appendChild(ifm);

        }

Also, you can try MingXu's reference about how to refresh/reload the Iframe.

Regards, Bill_Sww

ocket8888 · Accepted Answer · 2015-06-12T15:59:52.067

0

I think maybe my question was unclear, and for that I apologize. I'll try to go back and edit it tomorrow.
The solution for me was to, rather than set the src attribute of the iframe using angularjs, directly set it with
document.getElementById("iframe-id").src=/path_where_I_put_the_files/filename
(for reference I use "pdfthingy" to store the filename returned by the ajax call that downloads a blob).
This prevented the iframe from loading a null source before the filename was set. This is perhaps part of why walkformusle has said that DOM should not be controlled in this manner.

edited Jun 12 '15 at 15:59

answered Jun 11 '15 at 16:32

ocket8888

1,060
12
31

can you show a more complete part of your Ajax function in anguar? – Gary Liu Jun 12 '15 at 09:11
Does this help? [http://pastebin.com/6B7kJp5T] The stuff above the formData(); shouldn't make sense to you; it's just some junk I do to make sure I have the right file. – ocket8888 Jun 12 '15 at 16:49

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

I find the answer, the major reason is that we shouldn't use controllers to manipulate DOM.

sentence like document.getElementById("viewerjs_preview").contentDocument.location.reload(true) will not work anymore in angular scope, so you have to a directive to do it. I think the same question with you is and which's answer with most votes dose work well.

edited May 23 '17 at 12:31

Community

1
1

answered Jun 12 '15 at 09:50

Gary Liu

13,758
1
17
32

refresh iframe after downloading a blob

4 Answers4