Sự khác nhau giữa <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

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 2

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 3

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 là gì.

Answer 4

tạo ra một thẻ mới và nhấp vào nó sử dụng jquery:

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

các thẻ trong trường hợp này sẽ không được thêm vào DOM, sẽ chỉ được sử dụng để mô phỏng các nhấp chuột.

Answer 5

Theo HTML5 spec, phần tử khoảng có thể chỉ có global attributes, không bao gồm href. Vì vậy, giá trị được tìm nạp từ thuộc tính có thể không đúng định dạng hoặc không tương thích với loại được chấp nhận bởi window.location.href. Tôi không chắc chắn nếu điều này có thể liên quan đến vấn đề này.

Bạn đã thử gán một chuỗi không đổi như window.location.href = "http://example.com/file"?

Answer 6

Hãy thử window.open, chuyển trong "_self" làm tên cửa sổ mục tiêu.

window.open(there, "_self"); 

Sử dụng "_self" là phần quan trọng ở đây, nếu không trình chặn bật lên sẽ chặn nó. Tôi muốn kiểm tra điều này, nhưng tôi không có một liên kết đến một tập tin acsm.

Edit: Hai nhiều ý tưởng:

Thêm một biểu mẫu để trang của bạn với một phương pháp "GET" và một hành động của tệp ACSM của bạn. Loại trừ các trường biểu mẫu trừ khi chúng ánh xạ thích hợp với URL của bạn.

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

Sau đó chỉ cần đưa ra hình thức của bạn với form.submit():

document.forms.acsm.submit(); 

Và ý tưởng khác: Tạo một trang trên máy chủ của bạn mà một server-side chuyển hướng đến tệp ACSM của bạn. Sau đó, chỉ cần sử dụng thông thường location.href = url đến trang máy chủ đó.

Answer 7

Nếu đây là lỗi với iOS, hãy mô phỏng nhấp chuột vào liên kết. Không giống như giải pháp của memical, điều này sẽ không bong bóng:

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);