What’s the difference between <a href=“url”> and window.location = “url” on iOS?

Question

I have an HTML 5 app that runs on mobile devices including the iPad. I want to create a link to a non-HTML file, and have the proper application open to handle the file. The files are .acsm files, to be opened in Bluefire.

If I create the link as a simple <a href="url"> tag, it works.

If instead I use Javascript to set the window.location , it doesn't work. The iPad pops an alert that says, "Download failed: This file cannot be downloaded".

I've experimented with other file types, and haven't found anything conclusive. What's the difference between the simple link and the Javascript technique? Can I make the Javascript code do the same thing as the link?

In case the specific Javascript details matter, I do it like this with jQuery:

$('.native-launch').live('click', function (evobj) {
  var there = $(evobj.target).attr('href');
  window.location.href = there;
  return false;
});

and the HTML looks like:

<span class="catalog-list-button native-launch" href="url">Read in another app</span>

(Note that this is a span with an href, I can change the HTML if that would help.)

Answer 1

Try window.open , passing in "_self" as the target window name.

window.open(there, "_self");

Using "_self" is the critical part here, otherwise the popup blocker would intercept it. I'd test this, but I don't have a link to an acsm file.

Edit: Two more ideas:

Add a form to your page with a method of "GET" and an action of your acsm file. Exclude form fields unless they map appropriately to your URL.

<form id="acsm" method="GET" action="http://myserver.com/myfile.acsm"></form>

Then just submit your form with form.submit() :

document.forms.acsm.submit();

And the other idea: Create a page on your server that does a server-side redirect to your acsm file. Then just use the usual location.href = url to that server page.

Answer 2

create a new a tag and click it using jquery:

$("<a />").attr("href", there).click();

the a tag in this case will not be added to DOM, will only be used to simulate the click.

Answer 3

It seems like a Safari bug to me. If you write window.location : Safari is expecting an html file or any type of file it can actualy display.

Whereas when you click a link it reads the content-type and then decide to open it in the same window or open an application for it.

I think you should try to open a popup window with the url. It should theoretically work.

Answer 4

With the JS-function window.location the browser want to open the file with the Browser and not with any other program. But with the A-Tag you link to something. This can be any file. If the browser didn't know the typ of the file the browser alert a popup for download the file. If the file is for example a HTML-File the browser open the file and show it.

For downloading a File with JS here is a link .

Answer 5

I would think a link was better in case some type of screen reader was trying to parse your page. If your navigation was in javascript, something like that would fail to tell visually impaired users what's going on.

Btw, instead of return false; from your event handler. do evobj.preventDefault() , it's the preferred way to stop bubbling for the event.

Answer 6

According to the HTML5 spec , span element can have only the global attributes , which doesn't include href . So the value fetched from the attribute may be malformed or incompatible with the type accepted by window.location.href . I'm not sure if this could be related to the issue.

Did you try assigning a constant string like window.location.href = "http://example.com/file" ?

Answer 7

If this is a bug with iOS, simulate a click on a link. Unlike memical's solution, this will not bubble:

var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
a.href = your_url_here;
var click = document.createEvent("Event");
click.initEvent("click", false /*bubbles*/, true /*cancellable*/);
a.dispatchEvent(click);