4

I am trying to modify a site that uses "Morten's JavaScript Tree Menu" to display PDFs in a frames set using the Adobe Reader plug-in.

On the iPad the frame is useless, so I want to open the PDF in a new tab. Not wanting to mess with the tree menu I thought I could use JavaScript in the web page being opened in the viewer frame to open a new tab with the PDF.

I am using window.open() in $(document).ready(function() to open the pdf in the new tab. The problem is that window.open() does not want to work in the iPad.

The body of the HTML normally looks like this...

<body>
    <object data="MypdfFileName.pdf#toolbar=1&amp;navpanes=1&amp;scrollbar=0&amp;page=1&amp;view=FitH" 
    type="application/pdf" 
    width="100%" 
    height="100%">
    </object>
</body>

I changed it to only have a div like this...

<body>
    <div class="myviewer" ></div>
</body>

Then used the following script...

$(document).ready(function() {
    var isMobile = {
        Android : function() {
            return navigator.userAgent.match(/Android/i) ? true : false;
        },
        BlackBerry : function() {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false;
        },
        iOS : function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
        },
        Windows : function() {
            return navigator.userAgent.match(/IEMobile/i) ? true : false;
        },
        any : function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
        }
    };

    if(isMobile.any()) {
        var file = "MypdfFileName.pdf";
            window.open(file);
    }else {
        var markup = "<object   data='MypdfFileName.pdf#toolbar=1&amp;navpanes=1&amp;scrollbar=0&amp;page=1&amp;view=FitH' type='application/pdf' width='100%' height='100%'></object>";
        $('.myviewer').append(markup);
    };
});

Everthing works except for window.open() on the iPad. If I switch things around widow.open() works fine on a computer. In another project I am using window.open() successfully on the iPad from an onclick function.

I tried using a timer function. I also tried adding an onclick function to the div and posting a click event. In both cases they worked on a computer but not an iPad. I am stumped.

I know it would make more sense to handle the ipad in the tree menu frame, but that code is so complex I can't figure out where to put/modify the onclick event.

Is there a way to change the object so that it opens in a new tab?

Is anyone familiar enough with Mortens Tree Menu code that can tell me how to channge the on click event so that it opens the pdf in a new tab instead of opening a page in the frame?

Thanks

user278859
  • 10,379
  • 12
  • 51
  • 74
  • I was able to get the window.open to work if I put it directly in the div... onclick="window.open('MypdfFileName.pdf');". If I tap the div in the iPad, it works. So I changed isMobile.any to $('.myviewer').bind("click touch"); but like window.open, bind("click touch") works on a computer but does not want to do anything the iPad. .click() doesn't work either. This is probably good for posting in another question. – user278859 Jun 03 '12 at 19:33
  • probably Safari tries to block popups. That means that when the user clicks, does an action, window.open works, but not when it "happens". – Gavriel Jun 03 '12 at 21:12
  • Gavriel you are a genius. Thank you. I went to preferences on the iPad and turned block popups off and it works now. Please post your answer so I can give you creds. – user278859 Jun 03 '12 at 22:37

2 Answers2

3

probably Safari tries to block popups. That means that when the user clicks, does an action, window.open works, but not when it "happens".

Gavriel
  • 18,880
  • 12
  • 68
  • 105
0

You should also check your element and parent elements and make sure you do not have a ":hover" pseudo class on there. When you touch that element expecting a "click" event to occur, it will trigger the hover state on the element. If you touch again it will then fire the click event.

teewuane
  • 5,524
  • 5
  • 37
  • 43