Html problem with target="_blank" on iPad, does not open a new window on the iPad.

westdh
westdh used Ask the Experts™
on
Html problem with target="_blank" on iPad, does not open a new window on the iPad.
the same code works on the mac and does open a new window.

This code works on a Mac and it does create a new window and i can return to the previous page.

 <a target="_blank" href="http://www.lazyslumber.com/images/pdf/07_Apply%20DL.pdf"><img src='img/Portfolio/ProductGuide.png' alt="portfolio image"><H6>Download PDF File [2,124 kb]</h6></a>  

On the iPad it brings up and displays the pdf, but not in a new window.... target="_blank" does not work on the iPad or SmartPhones.
when I click the browser close window or back button I have no way to return to the device, it just move to a previous url in history.

-------------------------------------- complete Page ----------------------------------------------------------
<!DOCTYPE html>
<html>
      <head>
            <title>Touch Mobile &amp; Tablet Template</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;"  />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
            <link rel="stylesheet" href="css/style.css" />
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
            <script type="text/javascript" src="js/script.js"></script>
   
    </head>
      <body>
            <div data-role="page" class="page">
                  <div data-role="header">
                        <a href="index.html" data-icon="arrow-l" data-direction="reverse">Back</a>
                        <a href="index.html" data-icon="home" data-direction="reverse">Home</a>
                        <h3>Free Download and Links</h3>
                  </div><!--/header-->
                  
                  <div data-role="content">
                        <!--<div class="portfolio-item" >-->
                              <div class="portfolio-information">
                        <hr>
                                    <h3>Green Statement</h3>
                        A one page statement outlining our standards regarding purchasing cedar cants and logs.
                                    <a target="_blank" href="pdf/GreenStatement.pdf"><img src="img/Portfolio/GreenStatement.png" alt="portfolio image"><h6>Download PDF File [201 kb]</h6></a>      
                                    
                        <hr>
                       
                        <h3>Product Guide</h3>
                        A color brochure that describes the materials needed and how to apply cedar siding.    
                        <a target="_blank" href="http://www.lazyslumber.com/images/pdf/07_Apply%20DL.pdf"><img src='img/Portfolio/ProductGuide.png' alt="portfolio image"><H6>Download PDF File [2,124 kb]</h6></a>      
                        <hr>
                       
                        <h3>Specifications</h3>
                        A list of our products with dimensions and detailed profles shown.<br>
                        <a target="_blank" href="http://www.lazyslumber.com/images/pdf/Profiles02a.pdf"><img src='img/Portfolio/Specifications.png' alt="portfolio image"><h6>Download PDF File [1,811 kb]</h6></a>                      
                        <hr>

                    </div>
                              <!--</div>-->
                        </div>
                        
                        

                  </div><!-- /content -->
            </div><!-- /page -->
      </body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
http://www.mways.co.uk/page-144.html

The TARGET="_BLANK" tag is as old as the hills when it comes to HTML, but some people seem to get very upset by it.
If you listen to some web evangelists, they will tell you to never use it, that the visitor should be able to be in control of whether pages open in the current window/tab or a new one (which, of course they can do using the right mouse button menu). In some ways they are right, but mostly they are just reacting to the obvious over-use of the tag by unscrupulous developers in the past.

I couldn't find any sensible guide on-line for best-practice for using the tag so I thought I would give you the benefit of my experience in web development and tell you when you should, and should not use it.

First of all, the negatives.

Beware devices that have limited space for tabs/windows. For example, on the iPhone and iPad, TARGET='_BLANK' will work but you have a limit of 9 web pages that can be open at any time. So if you already have 9 pages open, the link won't do anything.

Additionally, TARGET="_BLANK" won't validate under HTML 4.01 Strict, and won't even work at all in XHTML. XHTML is pretty much dead (hurrah!) but if you're the sort of person who orders your spice rack alphabetically and you really feel the need to use HTML strict and have it error-free, there is a JavaScript alternative to TARGET="_BLANK"


<A href="mypage.html" onclick="window.open(this.href,'_blank');return false;">Click me</a>

So here is my golden rule for when you should use TARGET="_BLANK"

Only use TARGET="_BLANK" when most people would be inconvenienced by the page they were previously viewing disappearing. In 99% of cases, TARGET="_BLANK" should only be used for external links.

May sites wrap every external link with TARGET="_BLANK" in order to keep the visitors on their site and not to lose them to a different site. Some people don't like this, but in many cases it can be a benefit. If you're reading a long article, and there's a link to an external page for more information about a specific point, or you want to click on a photo to see a larger version, it can be frustrating if you're kicked out of the page you were viewing. Modern browsers are pretty good at returning you to the point you were before when you click the back button, but even still, it's usually more sensible to open those sort of pages as a new tab/window.

Note that I said that most internal links should NOT open a new tab/window. Two specific exceptions for this are when you're opening up a page that is just to expand on a single point and then be closed (for example, clicking on an image thumbnail to open a larger version). At this point, you don't want the visitor to click the close button thinking they're going back to the page only to find they've closed and lost the tab they were reading. With these sorts of pages it's usually more natural to click a close button than the back button. And if you've opened in a new tab/window the back button won't be active anyway.

The other important time to use TARGET="_BLANK" is when you're in the middle of a form submission, or you're on a page that is a POST form result page - where either a link will lose data you are entering or the back button will not actually work (remember, use GET methods for most simple forms, eg site searches, to avoid this).

A good example is when you're in a shopping cart page, you're adding your details and delivery information and you want to check the terms and conditions of sale. The link to Terms and Conditions at this point should NOT mean you lose your progress in completing the form. This is a perfectly good example of when TARGET="_BLANK" works well.

Author

Commented:
I am swiching to iframes

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial