iOS web app opens Safari in spite of avoiding HTML 'href' links - ios

My IOS (tested on 9.2) web application (apple-mobile-web-app-capable) avoids <a href="xxx" />
links and uses only Javascript navigation functions like windows.location.replace(url) to navigate to the pages.
The root of my application is not www.xxx.com but www.xxx.com/mysite. Some of the navigate operations to /mysite/xxx are working, but other navigations to /mysite/yyy open the Safari window.
Beside the <a href="xxx" /> links, are there other situations which can cause the web app to open the link in a separate Safari window ?
I do not use target Attribute. All my links look like
<a ng-click="vm.replace('/mysite/xxx') class="navbar-brand">Contact</a>
...
replace(url:string) {
this.$window.location.replace(url);
}
I also tried the different variations (location.href = url, location = url) all with same result. Maybe the Problem is IOS 9.2 related, I am sure that the same construct was working in web apps I created some month ago.
Is it possible that the content of the target page is responsible for this behavior ? Navigating from /mysite/Home to to /mysite/Media works, navigating to /mysite/EPG opens the Safari browser. Maybe something bad in the browser cache ? So I cleared the cache, but same result.

Based on your description, it sounds like target="_blank" is being used, which is what causes web links to open in a new window. As you're using JavaScript for all your links, this should be relatively easy to check.

Related

angular link selection doesn't work on IOS safari

I'm doing a responsive app using meteor and angular, and i have a share link functionality. On desktop it is an input field on read only and the user can copy the link. On mobile I want to do display an link with tag. But on iOS safari doesn't react correctly when I long touch the link. Usually there is a menu of option that are displayed, but here just nothing happen.
my simple code : {{url}}
Thanks in advance to anybody that has an idea about this issue.
Update: I just tried wiht <a ng-href="{{url}}">{{url}}</a> on Firefox android and it work perfectly. The issue is really an iOs case
You should use ng-href={{url}} instead.
My guess is that iOS reads first the {{url}} as it is, and when angular updates it to whatever value is stored in the url variable, it does not pick up the new value.
And because the string {{url}} is not valid url, it does not know how to work with that, so it does nothing.
(I am not iOS developer, but still, you should use ng-href for this)
For long touch/press especially for mobile: Check this angular directive link

Load web page in PhoneGap app

I'm using PhoneGap with AngularJS framework.
I want to display a web page. I tried to use iframe but scroll isn't working.
I want to keep this page inside my app and not as a in app browser or external browser.
My app is running on iOS, Android and WP8 both.
Some help please :)
Thanks in advance
function loadWebView(pid)
{
var url = "http://dummysite.com/index.php/catalog/product/view/id/"+pid;
$("#div_load_page").html('<object data='+url+' class="webview"/>');
};
This is simple jQuery I've applied in my phonegap application which gives me the desired result. Scroll bars are visible and depend on site's responsiveness and size.
See Result.

break website out of iframe/uiwebview on iphone twitter client?

when we click on a link to our site, www.tekiki.com, from inside the twitter iphone client (search for tekiki.com on the twitter mobile client), the site appears in a boxed area.
is this an iframe or something we can break out of? we tried iframe-busting code, but it fails. we suspect this is a uiwebview. if true, can we bust out and open the site in safari/chrome via javascript?
When you click on a link within the official Twitter iOS app, it opens up a new modal view that contains a UIWebView. There is no way that you can break out of this view and into a different app since Twitter controls the experience. iOS only supports fast app switching via registered URL schemes such as fb://1234567890, not via javascript, etc.
The only way would be if they had an additional button that gave the user the option to open the page in a different app.

How to to run jQuery Mobile on locale maschiene with file:-protocol in Safari

I need to run jQuery Mobile locale in Safari with file:/// protocol in kiosk mode. The problem is that Safari throws the
'error loading page'
error when using file:/// protocol.
Is there a way to run jQuery Mobile in Safari locale?
Thnx!
One option might be to disable AJAX page linking
Another Page
http://jquerymobile.com/test/docs/pages/page-links.html
A different approach might be to go with a Single Page App design? All "pages" are loaded into the same single physical HTML document. Multiple DIVs with data-role="page".

Links in remote JQueryMobile sites in a PhoneGap app open safari

I'm having quite a peculiar problem with PhoneGap and JQuery Mobile, using the latest versions of both frameworks as of this writing.
My phonegap app has some pages 'local' to the app, and other pages that are loaded directly from a remote site. Going between the local and remote pages is fine (there is no transition but that can't exactly be helped). However, once I'm on the remote pages, any link I click on the remote pages opens Safari with the page I requested. This is not desirable functionality, as I would like it all to be within the UIWebView, and none of my links are marked with anything special that would cause Safari to open.
It gets weirder. If I then switch from Safari back to the program, the remote page I requested appears in the UIWebView, however pressing the back button leads me not to the first remote page, but the first local page.
The phonegap app right now is quite bare, very close to the default except with JQM css + js loaded. This happens even if I create a simple test app that has one local JQM page, one remote JQM page and then a remote page that is linked to from a JQM remote page.
I'm stumped. What's going on here?
The default behavior for PhoneGap is to open external links in Safari unless they are added to the ExternalHosts property in PhoneGap.plist.
Try adding the external hosts and PhoneGap should behave correctly and load the external locations inside of the application.
(source: tumblr.com)
Here also is a post about using iFrames and ExternalHosts that could be of some help as well.

Resources