I've built a mobile website - a web site optimized for handheld units. If you are using an iPhone you launch Safari and go to the site URL to use this web app. It can also be run as an iPhone web app by adding it to your home screen. So it's not a native iPhone app - it's a mobile web page.
If you choose to run this mobile web page as an iPhone web app (by adding it to your home screen) you are not in the normal Safari interface. If the user clicks a link to an external site, you leave the web app and the link is opened in Safari. If you on the other hand use JavaScript to change the location, the link is opened in the web app - not in Safari.
Now I'm looking for a way to open a link in Safari from an iPhone web app using JavaScript. I've tried window.location.href but since it's JavaScript you stay in the web app.
Thanks in advance!
I'm also struggling with this. I have defaulted to using basic HTML when opening an external link, instead of Javascript – this appears to force it to open in another browser. I simply write a div with the link inside it, either using Javascript or static in the .html file.
An example of my implementation, check the "about" pages for offsite links written in HTML: http://4drillsbrewery.com/tools
(Please don't judge the code, it was all just a toy written to get used to Dashcode, not as a programming project! thanks). I'll be following this thread, hoping someone has a better way.
I appreciate this isn't going to help in all scenarios BUT PROVIDED the javascript code originates from a user generated click of a hyperlink there is this solution...
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
$(this).prop("href", url);
return true; // return true so the click propagates and the new href is followed
});
You could extend this further so that it works both when the site is being browsed in Safari normally and as a standalone app.
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
if (window.navigator.standalone) {
// We are within the context of an iPhone standalone/fullscreen/homescreen app
// Change the href and return true so that we leave the standalone app and the URL is opened in a new window in Safari
$(this).prop("href", url);
return true;
} else {
// Website is open in a browser normally
// Open the URl in a new browser window
window.open(url);
return false; // Return false so the href isn't followed
}
});
Related
When a website is loaded via an app in either android or ios is there a way to force those links to open in the default browser of the device?
I have tried with the basic _blank html attribute on the links but no luck. I also tried this code but still the same - the website opens as part of the app...
$('.lnkAtoZApp').click(function (e) {
window.open(this.href, '_system'); this.href = "javascript:void(0)"; event.preventDefault();
});
I'm looking to share a webpage to Facebook Messenger as part of a promotional campaign. Everything seems to be working in usual desktop and mobile browsers however, in Facebook's built in browser, the Facebook Messenger app is not opened and the page just anchors back to the top.
In the Facebook Developer documentation it is suggested to use the following:
window.open('fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX');
but I have also tried:
window.location.href = 'fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX';
The CTA to share is a simple element with a href="#" (assume that's why the Facebook browser is jumping me back to the top of the page) with a click event to fire the user to Facebook Messenger with the page's share information prepopulated. For example:
$('#facebookShare').on('click', function() {
window.location.href = 'fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX';
});
This all works perfectly fine in Chrome and Safari on a mobile device but as soon as it's running in Facebook's built-in browser it simply doesn't do anything.
Any help or guidance on opening Facebook Messenger from within the Facebook app's build-in browser would be greatly appreciated.
I don't think it is possible from the Facebook browser. According to the docs:
The link works on mobile web sites on iOS and Android platforms, with native apps, but deep linking does not work with webviews.
The built in Facebook browser is a webview, so it looks like it is not possible.
There was a lot of traffic about preventing a link in a standalone web app from opening in mobile Safari, but the iOS versions quoted were much earlier (7-9?). In iOS 11, I'm having the opposite problem: in my standalone web app, I have links to PDF files that need to be displayed. When I click on them, they open inside the web app browser instead of inside Safari, no matter what options I have given. Because of standalone mode, the result is a dead-end in the web app that requires restart of the app. (Android seems to do the right thing and pass off to a pdf viewing app.)
Click handler (javascript/bootstrap/jquery):
function openDocument(docURL) {
window.open(docURL,'_blank');
return false;
}
Alternatively, can one turn on the navigation inside the web app for the new page so that I can avoid the dead end? (I think no from what I'm reading; I've tried some options to window.open to no avail.) Or is it possible somehow put together a (multi-page) pdf viewer and a UI element for dismissal? Suggestions welcome.
EDIT: summarizing discussion below, iOS handles internal vs external links differently in standalone web apps. Making the links appear to be external by remapping on the server side allows the link to force Safari to open.
HHave an iFrame or a DIV in your page and load the PDF inside that component. Have a back button top of the iFrame to avoid dead end.
<iframe src="https://example.com/mypdf.pdf"
width="match your parent element" height="match your parent element" >
You can see one more option here to embed PDF.
Update: If you open the PDF form a different domain or sub-domain, it will be opened in a separate window even in iOS. Say your PWA URL is https://www.example.com/myapp and if you are currently accessing pdf from "https://www.example.com/myapp/pdf/mypdf.pdf", set an alias for this URL like "https://www.pdf.example.com/myapp/mypdf.pdf".
If the domain or sub-domain changes in a PWA, it will be treated as an external link and will always open in a new window and not inside the app leading the the dead end. You can try this if the CSS hacks are not good enough.
i am making a project that should show a simple app made in titanium and that should demonstrate how simmilar the apps are in iOS and Android but my problem is i am using PC so i can't realy test things for iPhone from home.
I got a chance to test my app for a few min on a Mac the other day and i noticed that all of my windows are working correctly wich i was quite happy about but the back button is not generating on the iPhone so it is imposible to go back in windows, i had to close the app and restart to check all functions of the app.
So my app starts as a 2 tab app with each tab having a window linked via "url" and each of those windows contain a few buttons that act as a navigation, by pressing a button it directs you further to other windows in different .js files wich may contain links like that on their own like tableviews that onclick go to another window.
app.js
Example for one of the tabs:
var win1 = Titanium.UI.createWindow({
title:'Informacije',
backgroundColor:'#F4F4F4',
url:'info.js',
layout:'vertical'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Info',
window:win1
});
Info.js contains 3 buttons each going on click to another window with this code:
button3.addEventListener('click', function(e){
var newWin3 = Titanium.UI.createWindow({
title:'Kontakt',
url:'kont.js',
layout:'vertical',
backgroundColor:'#4B638D'
});
Titanium.UI.currentTab.open(newWin3,{animation:true});
})
WIndows that open afterwards use "modal" to open since i was not able to open another window in a tab group since there was one there already.
Sorry if this is a simple issue but everything i did till now worked like a charm in android emulator, and i am unable to test on a Mac so i would appreciate if someone could give me a solution.
I have to add that am am new to titanium, javascript and programing in general so im not realy well informed with all solutions , please don't hate on me :)
The automatically generated back button on iOS is a feature of NavigationGroup (now being replaced by NavigationWindow) only. You have to either generate a button which will close the current window manually:
var win = Ti.UI.createWindow({
...
});
var backButton = Ti.UI.createButton({
...
});
win.setLeftNavButton(backButton);
win.open();
backButton.addEventListener('click', function() {
win.close();
});
( just add the backButton platform dependent by: )
if(Ti.Platform.name === 'iPhone OS') {
win.setLeftNavButton(backButton);
}
or use a NavigationGroup for the iOS Platform only.
Which rather proves that these platforms are not too similar at all ;)
I developed a small web app which runs perfectly in my browsers (Firefox, Chrome, Safari on iPad). Then I decided to modify the app so it runs as a standalone web app on my iPad. This was no problem as I found pretty good information on the web.
Because I'm using many app-internal links, I added the following JavaScript jQuery code to the app:
if (window.navigator.standalone) {
// running as web app
$(function () {
$('a').each(function () {
if (!$(this).hasClass('external')) {
var href = $(this).attr('href');
$(this).attr('href', 'javascript:this.location = \'' + href + '\'');
}
});
});
}
In case the app is run in standalone mode, this code modifies all links which do not have the CSS class external so they won't open in a new Safari window. This code works fine.
The problem is that if I open a link that is external, a new Safari window opens (as expected). But when I switch back to my app (using the four-finger-gesture), the app is frozen: No scrolling, nothing clickable, no task switching, no five-finger-gesture anymore. When I press the Home button, the iPad shows my home screen for a split second, and then instantly switches to the iPad search screen. When I turn the screen off and on again, I'm on the home screen.
The only gesture that works is the four-finger-gesture to bring up the task bar (is that its name?). When I terminate the app using the task bar, it is still on the screen and the iPad behaves as if I hadn't terminated the app (see last paragraph). Feels like the app crahed in some crazy way.
I don't know what I've done wrong. It's a pretty simple web page with very few JavaScript and an HTML structure that is not deeply nested.
The device is an iPad 2 3G with iOS 5.1.
Can anyone help me with this?
So I gave this code before I read this link: iPhone Safari Web App opens links in new window
Did you try This answer ?
My previous answer:
if (window.navigator.standalone) {
// running as web app
$(function () {
$('a').each(function () {
if (!$(this).hasClass('external')) {
var href = $(this).attr('href');
$(this).click(function() { window.location = href; return false;});
}
});
});
}