Search jQuery

jQuery Forum

Open PDF in new window from iphone home screen web app

in jQuery Mobile • 12 years ago

I've developed a nice document browser web app. When it comes time to click the link to open the PDF, it opens in the same window even with target="_blank" and/or rel="external". This is a big problem because when accessing a PDF inside the native web app view (probably a simple UIWebview implementation), no support is provided for iBooks like normal safari has. It's your PDF with no chrome or navigation at all. Only way back is to shut down the app and restart. Also tried opening via JavaScript "with window.open". Nothing is working!

I also thought maybe I could use a custom URL Scheme for opening it into iBooks. Apparently iBooks doesnt have a url scheme web apps can use that I can tell...

I have determined that opening the PDF in a new instance of safari would be sufficient, but I cannot through jQuery Mobile. In fact, when I first started iphone native web apps, I had the opposite problem where ALL links opened in safari and not the app. When introducing jQuery Mobile, the problem went away, but now I want that functionality for select links!

Can someone offer me an answer to this problem? I have seen this question posted all over a dozen or more times with zero replies. Someone has to know something! Any help is appreciated!

- Mike

Replies(9)

epsd.jque..

Re: Open PDF in new window from iphone home screen web app

12 years ago

i was able to open to new window from web app mode with jqtouch. So maybe look in that code?

Webappster

Re: Re: Open PDF in new window from iphone home screen web app

12 years ago

Is your web app public? Can you share a link and direct me to an example? Did you specify a target (e.g. _blank)?

I know this is easily possible under normal circumstances, but when using jQuery Mobile Framework, something is going wrong.

epsd.jque..

Re: Open PDF in new window from iphone home screen web app

12 years ago

Sorry, you are right, JQM is preventing this. If you open the jqm js, find this function:

//click routing - direct to HTTP or Ajax, accordingly

$( "a" ).live( "click", function(event) {

It is the function that is hijacking the normal target=_blank method and stopping your links from opening in a new window from web app mode. Within this function, you could add something like:

var testtarget = $this.attr( "target" );

if (testtarget == '_blank') {

alert('Leaving web app');

return true;

}

So, the entire function would now look like:

//click routing - direct to HTTP or Ajax, accordingly

$( "a" ).live( "click", function(event) {

var $this = $(this),

//get href, remove same-domain protocol and host

href = $this.attr( "href" ).replace( location.protocol + "//" + location.host, ""),

//if target attr is specified, it's external, and we mimic _blank... for now

target = $this.is( "[target]" ),

//if it still starts with a protocol, it's external, or could be :mailto, etc

external = target || /^(:?\w+:)/.test( href ) || $this.is( "[rel=external]" ),

target = $this.is( "[target]" );

if( href === '#' ){

//for links created purely for interaction - ignore

return false;

}

var testtarget = $this.attr( "target" );

if (testtarget == '_blank') {

alert('Leaving web app');

return true;

}

$activeClickedLink = $this.closest( ".ui-btn" ).addClass( $.mobile.activeBtnClass );

if( external || !$.mobile.ajaxLinksEnabled ){

//remove active link class if external

removeActiveLinkClass(true);

//deliberately redirect, in case click was triggered

if( target ){

window.open(href);

//return true;

}

else{

location.href = href;

}

else {

//use ajax

var transition = $this.data( "transition" ),

back = $this.data( "back" ),

changeHashOnSuccess = !$this.is( "[data-rel="+ $.mobile.nonHistorySelectors +"]" );

nextPageRole = $this.attr( "data-rel" );

//if it's a relative href, prefix href with base url

if( href.indexOf('/') && href.indexOf('#') !== 0 ){

href = getBaseURL() + href;

}

href.replace(/^#/,'');

changePage(href, transition, back, changeHashOnSuccess);

}

event.preventDefault();

});

Webappster

Re: Open PDF in new window from iphone home screen web app

12 years ago

This was the trick. Thank you very much for following through! Now that I've seen it work, it closes the app and opens safari, upon return to the app, the app is reloaded. I guess Apple left out multi-tasking support in their chrome-less web app viewer. Rude!

Again, thanks for the help! On to the next problem. :o\

epsd.jque..

Re: Open PDF in new window from iphone home screen web app

12 years ago

A little further refinement:

var testtarget = $this.attr( "target" );

var inaapp = window.navigator.standalone;

if (testtarget == '_blank' && inaapp == true) {

alert('Leaving web app');

return true;

}

What this does is only override the JQM click behavior for target=_blank items IF the user is running in fullscreen (i.e., web app) mode.

Webappster

Re: Re: Open PDF in new window from iphone home screen web app

12 years ago

Ah yes. Good call on that one. :o)

To finalize, this is the code I ended up using... Just added a confirm dialog instead of normal alert.

var testtarget = $this.attr("target");
var inaapp= window.navigator.standalone;
if (testtarget == '_blank' && inaapp) {
return confirm('Leaving app. Continue?');
}

wetcoast

Re: Open PDF in new window from iphone home screen web app

12 years ago

I've applied the hack given by @Webappster above, and it works... sometimes. I've got a listview with links in it like this:

<ul data-role="listview">
...
<li><a target="_blank" href="http://example.com/">external link</a></li>
...
</ul>

If I touch the text (e.g. "external link") in the LI button, the Confirm dialog pops up, I touch OK and then the Safari Mobile browser opens up and loads the URL. However, if I touch the LI button but not the text in the button, the Confirm dialog pops up, I touch OK, the Confirm dialog goes away and nothing else happens. The URL isn't openned in the fullscreen webapp nor in Safari Mobile. Took a few tries before I figured out why the URLs were opening in Safari Mobile sometimes and other times nothing was working.

Not sure what the workaround for this little wrinkle is yet, but thought I'd pass this along before anybody else bashes their head against this particular wall.

Using jQuery 1.5.1 and jQuery Mobile 1.0a3 and testing on an iPhone 3GS running iOS 4.2.1.

wetcoast

Re: Open PDF in new window from iphone home screen web app

12 years ago

Found a post in the jQuery Mobile bug tracking that discusses this problem.

https://github.com/jquery/jquery-mobile/issues/597

Suggest that you log in there and vote this one up if you want it addressed.

goelement..

Re: Open PDF in new window from iphone home screen web app

11 years ago

How can I do this without using an <a> tag? In other words, how can I get a PDF to open in a new browser window by binding a click event to a class, rather than using the anchor tag?

I'm doing a very similar app. My <li>s have a document name and a checkbox for selecting which documents ultimately get included as links in an email. I want to add a small graphic to the left of each <li> which, when clicked open the PDF for viewing.

The issue is that I'd have a view icon, the document title, and the checkbox for the document all within the same <li>. When I do this and wrap the view icon with <a ...> the anchor interferes with the rest of the <li>.

If I just wrap my graphic in <span class="view_icon">, then bind that class to a function, can I still open my PDF in a new window?

Top Reply

Response title

Attachments

jQuery Forum

Open PDF in new window from iphone home screen web app

Replies(9)

Re: Open PDF in new window from iphone home screen web app

Re: Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Re: Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Re: Open PDF in new window from iphone home screen web app

Statistics

Tags

Actions