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&navpanes=1&scrollbar=0&page=1&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&navpanes=1&scrollbar=0&page=1&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 puter. 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 puter 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 plex 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
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&navpanes=1&scrollbar=0&page=1&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&navpanes=1&scrollbar=0&page=1&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 puter. 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 puter 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 plex 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
Share Improve this question asked Jun 3, 2012 at 17:52 user278859user278859 10.5k13 gold badges53 silver badges74 bronze badges 3- 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 puter but does not want to do anything the iPad. .click() doesn't work either. This is probably good for posting in another question. – user278859 Commented Jun 3, 2012 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 Commented Jun 3, 2012 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 Commented Jun 3, 2012 at 22:37
2 Answers
Reset to default 3probably Safari tries to block popups. That means that when the user clicks, does an action, window.open works, but not when it "happens".
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.