Search code examples
jqueryjquery-mobilewindow.open

window.open() does nothing in jquery mobile?


i can't use target=_blank because my actions are build dynamically, example: when user clicks on the link, i catch it with .click(function(event), than ajax api is called and then in the callback i have the url where to go.

Now the problem:

window.location = mylink; // WORKS - OK! window.open(mylink); // DOES NOT WORK - NOT OK!

why?

I need to open a new window because mylink is a link to a pdf file, and when using window.location the pdf file is correctly viewed, but,..without any back navigation controls of the browser. It's a mobile webapp, and i use jquery mobile.

Too bad on the internet many others have the pdf viewer problem but no one has solved it, so i figured out to open a new window and pass the pdf link there. This way my parent window would stay untouched. Otherwise, you have to kill the current session and open safari again..


Solution

  • Add target="_blank" to your links. Then, call this script on click event. It will open your pdf in new window.

    $( "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();
    });