refresh iframe after downloading a blob - javascript

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?

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.

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

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.

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.

Related

How to load external url and save it on server with javascript

I want to load bing images pages "http://www.bing.com/images/search?q=home+design&qft=+filterui:imagesize-large&safe=off" , and save this url as html with javascript.
here is my code sample that I try :
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
but this code is send file to download on browser.
whether this may be done save url on server with javascript?
Suggestion and corrections are welcome.
One way to do this is with iframes, although it might not always be available for every site. But Bing seems to be ok with using iframes. I just tried adding the specific URL you listed into an iframe with the following HTML code and it worked:
<iframe src="http://www.bing.com/images/search?q=home+design&qft=+filterui:imagesize-large&safe=off"></iframe>
For other sites, such as Google, it might not be so easy. Google doesn't allow anything to be loaded in iframes by default, however it seems they will allow specific searches to be configured in your google account and display in iframes on sites you specify.
To achieve with Javascript (since the question mentions javascript) you can just leave the "src" attribute blank and set it using the script, for example if you only have one iframe on the page
document.getElementsByTagName('iframe')[0].src="http://www.bing.com/";

Detecting iframe load when downloading a file through the iframe

I'm using AngularJS and setting ngSrc on an iframe, which I use to download a zipped archive to get around not being able to download files using AJAX. I'm using a directive for detecting the iframe load that I found here, which works great when you load a URL like "about:blank", but it doesn't have a load when I hit it with a RESTful call to download the file, even though it downloads the generated file.
// Markup of iframe using ngSrc and custom directive
<iframe ng-src="{{url}}" style="display:none;" iframe-onload="myCallback" />
// Controller setting iFrame, what I'd like to trigger the load
$scope.downloadArchive = function( id ) { // no load event? but downloads zip archive
var url = '/data/archive/instance/' + id;
$scope.url = $sce.trustAsResourceUrl( url );
}
// Controller setting iFrame, what does trigger the load
$scope.downloadArchive = function( id ) { // load event triggered
$scope.url = $sce.trustAsResourceUrl('about:blank');
}
Is is possible to detect an event when downloading a zipped archive through the iframe?
Is it that you can't download the file via AJAX due to browser restrictions? Like cross domain issues? You can find out by examining the error in Chrome Console.
If that is the case, you won't be able to view the contents of the file in an iframe either due to modern browser restrictions. Think of what can happen if developers are allowed to access the contents of any iframe. I could make a website with your bank's website in an iframe. Once you log in, I'd be able to listen to a form submit event from the iframe and then get your login credentials.
Hence, what could be happening is that your iframe is loading the file, trying to display the file within it, but intentionally hindering you from viewing its contents for security.
I'd recommend downloading the file via a proxy server you own or through a cloud service, and then serving the file from your own server. This circumvents cross domain issues since you can now ping your own server.
I ended up not trying to reset the URL each time and just appended the current time as a second parameter, which gets ignored by the server. Now it appears like iframe is reloading a new URL.
var url = '/data/archive/instance/' + id + '/' + Date.now();

testing blob urls

I'm using the Window.URL.createObjectURL function to generate a blob url for a local video file, which I then use to set the source of a <video> element. This loads the video when the URL is first constructed, and everything works well. But when the web page is reloaded, the generated URL is no longer valid -- the browser automatically revokes the generated URL.
My question: Is there a way to determine if this Blob URL has actually been revoked? In other words, how do I determine if I can still use this Blob url using javascript, jquery, or whatever options are out there?
I came up with a simple solution, which works... albeit, probably isn't ideal.
Basically, I take the url, set the <video> src to that url, and then attach a jquery error event handler to it. If the error event is called (which it is, if the blob url has been revoked) I then prompt the user to reselect their video file.

Initiating a download with javascript

I need to dynamically initiate a download with javascript. I have seen how people do this by doing something like
window.open("some url", "Download");
but I need to do it without changing the url of the current page (and not using frames if I can help it, or created and destroying a frame dynamically). Anybody know how to do this?
You don't need window.open(). It's plain ugly and prone to popupblockers (where you have no control over in clients). Just window.location is sufficient if the response header of the requested download URL contains Content-Disposition: attachment. This won't change the current URL in the browser address bar nor the current page, but just pop a Save As dialogue.
E.g.
window.location = 'http://download.winzip.com/winzip145.exe';

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories