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 ☺️.
Related
Use case:
1) user has chrome open on my website (which, by the way, is an iframe from which I don't have security sandbox privileges to access the outer window).
2) user goes to different application; MS Word for example.
3) a js event fires on my website (rendered in an iframe) and should bring chrome into focus. This is an internally-facing web app.
I tagged chrome-extensions because it seems like this should be possible:
google calendar already does exactly what is detailed above.
chrome.windows.update(windowId, {focused: true}) would do what I need... is there already a chrome extension that has hooks into this method?
To detect switching from Chrome to another application, you can indeed use chrome.windows via a chrome extension. Also, simple firing alert() will bring the browser application back into focus.
chrome.windows.onFocusChanged.addListener(function(window) {
if (window == chrome.windows.WINDOW_ID_NONE) {
// application lost focus
alert('Don\'t leave me!');
}
});
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 ;)
On google chrome, when an alert() is activated and chrome is minimized there is an instance that the chrome icon on the taskbar glows orange (windows 7) sometimes the whole browser maximizes.
Is it possible to activate that glowing feature with javascript?
I need this for our office. I want the chrome icon to glow when its minimized and the user received a new message.
Thanks!
I found this piece of code, can't test is right now because i'm not using windows, but you should give it a try.
<script type="text/javascript">
// Flashing TaskBar
setInterval(flashToolbar, 10000); // calls flashToolbar every 10000 ms
function flashToolbar() {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeActivate();
}
}
</script>
source: http://blogs.msdn.com/b/jennifer/archive/2011/05/10/ie-pinned-sites-part-8-how-to-implement-a-flashing-taskbar-button.aspx
What I needed was a tactic that can get the users attention when they receive a new message while the browser is minimized. I couldn't find a way for the icon on the task bar to blink but I found an alternative that still fills the need. #HariKrishnan gave a link that led to a couple of googling that made me discover Web Notifications. You can find a very simple tutorial here.
Cheers!
For future reference I added the tut here since its just a two step process . .
Step 1
Ask user to allow webkitNotifications (Same thing with the html5 geolocation)
function askPermission(){
webkitNotifications.requestPermission(testNotification);
}
Step 2
Creating a notification
function testNotification(){
var notification = webkitNotifications.createNotification('IMAGE','TITLE','BODY');
notification.show();
}
(Note: Multiple notifications will stack)
I am using a gwt based ui design framework (called GXT). In the docs for this framework, it is mentioned that running "javascript:isc.showConsole()" when the app is running, will open the developer console in browser.
However when I run this in Chrome it instead does a google search for the command- in firefox it simply does not work.
How do I execute this javascript in firefox or chrome--
javascript:isc.showConsole()
Bookmarklets cannot be executed in the location bar/omnibox any more.
You have to bookmark the javascript: link before it can be executed.
A better solution is using the built-in Developer tools, in which code can be pasted and executed in the current page:
Firefox: Ctrl Shift K - See Using the web console.
Chrome: Ctrl Shift J - See Developer tools.
In Chrome, you add a tab, open bookmarks - click Other Bookmarks, right click in the bookmarks area, click add new page - and paste the URL.
In Firefox, just manage your bookmarks, click on the folder, right click in the bookmarks section and click New Bookmark.
You have to put the command in the URL of the very SmartGWT
application that you're developing, not any blank page.
Making it become a bookmark bar is a good idea, click that bookmark
when you're opening the application will open the console for you.
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
}
});