When open an URL in webapp, how to display the new page in it without jump to Safari?

Question

I have two page in one directory for an iOS web app. One is index.html, the other one is detail.html.

In index.html, there is a link to detail.html like this

<a href="detail.html">
Redirect 
</a>

I opened index.html in iPhone's safari, then I added index.html to home screen.Then I opened this web app from home screen. When tapped "Redirect", the web app entered background , then Safari opened detail.html and came to foreground.

How to open detail.html in web app itself and not redirect to safari? Special Thanks!

Answer 1

I found the solution in https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/MakingaWebApp/MakingaWebApp.html#//apple_ref/doc/uid/TP40004692-CH18

I finally use javascript instead of label.

<SCRIPT LANGUAGE="JScript">
function toDetail() {
    document.location=('detail.html');
}
</SCRIPT>

<div class="cell" onclick="toDetail()">
</div>

Answer 2

To combine all the features required for overcoming the problems with such webapps, you can simply use this library http://iosjs.com/features/

If you are looking for a quickfix:

$( document ).on("click","a",function( event ){


   if($( event.target ).attr( "href" )){

   var str    = $( event.target ).attr( "href" );
   var patt   = /^#/g;
   var match  = str.match(patt);

  // Stop the default behavior of the browser,ie to change the URL of the page.

    event.preventDefault();

  // Manually change the location of the page to stay in "Standalone" mode 
  //  and change the URL at the same time.

    location.href = $( event.target ).attr( "href" );
);

This will take care of all the anchor tags.. You can use the 'match' variable to exclude the hrefs with '#' values.

This blog will give you example for the same:: http://www.bennadel.com/blog/2302-Preventing-Links-In-Standalone-iPhone-Applications-From-Opening-In-Mobile-Safari.htm