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;});
}
});
});
}
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 have an app that is a kiosk. The Kiosk can be used in multiple locations and will be specific to only that location based on the Id of said location. The Kiosk is first started from a page that lets the kiosk manager to select the location. The kiosk will refresh approx. every 2 minutes if the screen is idle it then reloads the welcome page for the location selected from the launch of the Kiosk. This behavior will happen no matter what page the Kiosk is on, i.e. welcome screen, the page that allows the end user to check in, the page that allows the user to select the reason they are visiting. The following code works with Edge, IE 11 and Chrome however with an IOS device it does not function as expected. IOS devices send the browser back to the page that is used for the location kiosk manager to select their location and start the Kiosk.
function startKioskOver() {
//only redirect if we have a location param
if ($routeParams.selectedLocationId > 0) {
datacontext.resetKiosk();
datacontext.getServiceQueueByLocationId($routeParams.selectedLocationId);
$location.path("/" + $routeParams.selectedLocationId + "/" + $window.indexPageGlobalRazorValues.DefaultView);
$route.reload();
window.location.reload();
}
}
Is there an issue with the IOS browser that it does not follow the behavior of all other browsers that have been tested? Does anyone have a work around that may help?
Thanks in advance for any help.
After going through the code, I found that:
window.location.reload();
was the problem. It was added by a coworker and I suspect that IOS browsers are running this async and it is getting called before the $route.reload(); was finished.
I have written a plain JavaScript code that will run on different Desktop and on Mobiles.
For Desktop, I can just open the browser console and test my JavaScript code. But how can I test for mobile devices. My code is mostly failing for mobile devices which I am able to figure out when I check the user agent.
Here is a simple piece of code, that extract word counts from a web page.
function countWords() {
try {
if (top.document && top.document.querySelector("body")) {
var _body = top.document.querySelector("body");
var words = _body.textContent || _body.innerText; //For old firefox, innerText does not work
if (words) {
words = words.replace(/\n/g,'');
var filteredWords = words.match(/\S+/g);
if (filteredWords && filteredWords.length > 0) {
userDetail.wordCount = filteredWords.length;
}
}
}
} catch (err) {
processError("countWords", err);
}
}
This code is not working on on mobile devices.
As mentioned above by, you can use a mac and IOS device, another option is Remote Debugging for android if you want to go that path - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
It's very handy and easier to get your hands on
To debug Javascript code (or just browser stuff in general) You need OS X and an iOS device (you should be able to do the same with the iOS Simulator, but I couldn't get it working and I mainly use a device to debug stuff, so didn't bother to figure it out). There's a feature to attach a web inspector to your browser window in the iOS device.
To enable it:
Device -> Settings -> Safari -> Advanced -> Enable Web Inspector
OS X -> Safari -> Develop (top bar) -> Choose your device from the dropdown menu -> Select app running JS code.
The web inspector should show up, if everything is ok. From there you should be able to debug your JS code.
EDIT:
This is for debugging iOS devices (useful if you want to support mobile Webkit).
You can actually open Console/Inspect element on mobile devices!
You need "chrome" for this to work.
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Just create a new bookmark and name it whatever you want, in the url part enter this above 👆 code and that's it!!
Now whenever you want to access Console in your mobile browser tap on the address bar and search for the bookmark that we just created.
Let's say that we named it as "Inspect Element" , If we type "Inspect Element" on the address bar our bookmark will appear, click on it to run the javascript , after few seconds your "console toggle button" should showup click on it to access the console/Inspect Element on your mobile browser.
Ok, let me give you a detailed step by step procedure for this.
•Create a new bookmark.
•Click on the three dot button on the top right corner and click on the "star" button on the top right of the side bar,to create a new bookmark.
•After Pasting the javascript code in the url section hit back button and search for Inspect element in the address bar.
•Click on the Inspect Element bookmark to run the javascript and you can see the console toggle button in the browser.
•Click on it to open the Console!
•You can enable the console in any website you want.
•Just go to the website and tap on the address bar and search for Inspect Element and press on it , console toggle button should showup.
•I hope this helped someone if so feel free to upvote ☺️.
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'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
}
});