iPad - window.open("tel:555", "_top") is not invoking default behavior - javascript

I'm developing an mobile site and need to invoke a phone call on mobile at the touchend event. On iPhone and Android the window.open('tel:555', '_top') is working fine, invoking a phone call.
On iPad, the default behavior is to offer a "Add to contacts" or "Copy" option. When using a link, it's working fine, as in <a href='tel:555'>555</a>
When trying window.open('tel:555', '_top') on iPad I'm getting:
Cannot Open Page
Safari cannot open the page because the address is invalid.
I've also tried setTimeout('window.location="tel:555";', 500); from How to trigger click-to-call with javascript (iphone), same problem.
Is there a way to invoke the default behavior with Javascript?

I believe this is the correct behaviour.
In the Apple URL Scheme Reference they specifically say that...
If the Phone application is not installed on the device, opening a tel URL displays an appropriate warning message to the user.
I would assume that an iPod Touch would also produce a similar error.

Related

Switching tab on iOS mobile browser is not working via a href target or even window.open window focus

I've been working on this for 1 week, but no luck I can't find any answer on this.
I want to switch tab on my browser iOS mobile via javascript or html, I tested it in all browser in mac and android, it's working as expected. But in iOS mobile it's not working. I saw some articles that I need to disable popup blocker which I did.
I tried simple way like
go
this will just create new window but when I clicked it again it doesn't switch to this tab
const newWindow = window.open(href,"custom_name")
same thing happens in here.
I also tried
newWindow.focus()
nothing happens
I read there's an article that iOS blocked the popup new window for security policy, not sure if this switching of tab is also included in that policy.
Is there a way to do this?

Make an <a> link or <button> automatically start dialing

I'm assuming there's got to be a way to get an <a> tag to automatically dial a phone number, because Google does it, but how?
Just using a tel: href opens a dialer, but it doesn't begin the phone call like when you click on the "Call" button (see below) from Google search results on mobile.
It looks like they're using JS to achieve this, but I'd love to know how so we can implement this into our call links on client websites. Clicking a button to call and also having to click the "dial/call" button in your dialer creates an extra barrier for conversions that I'd love to see eliminated. Any help is greatly appreciated!
Looked up a local guitar shop that I clicked to call yesterday (which automatically started the phone call) and opened the inspector. The call link html is highlighted.
This behavior is OS / Browser combination dependent.
The reason this works in your screenshot is the use of Google Chrome on a Google (Android) device. If you observe the same link using FireFox on android, or Safari on IOS you see different behaviors.
For more information reference the use of Intents

Open iOS app from a Safari without "Open in <app>" prompt

I'm trying to open the app from an HTML page. It's working well, but I need the app to open without asking the permission from the user.
Currently, Safari will ask the user that "Open this page in myapp". I don't want this message box.
How I can remove this message from Safari? I'm using an URI scheme to open the app. It looks something like myApp://domain.
You can't avoid the dialog you mentioned while using Custom URL schemes. This is iOS feature.
Instead you can use Universal Links to open your iOS App without additional dialog. You need to have control over iOS App to make this happens.
To simplify Universal Links setup, you can use one of the companies that can setup most of it for you. I am working in Firebase/Google https://firebase.google.com/docs/dynamic-links/ . Other answer mentioned company that will do this for you as well.
Try branch.io? It works with Android and iOS.

jQuery - Allow Autoshow Keyboard on Mobile

I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.
Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.
There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
Looks like Windows smartphones can help you, can't find any issue concerning a problem.
I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.
Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?
Bonus2 - autodetect scanner library.
Based on thoses answers you have to try some workarounds
You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up
In your case at the openning of your page ?
At least maybe this JS fiddle can help you or this one
You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard
Happy Coding.
try below code. It might work
// div is some selected element
var f = function(event) {
$timeout(function() { // angular way, setTimeout is OK
input[0].focus();
event.preventDefault();
})
};
var mobile = false;
div.on('click', function(event) {
if(mobile) return;
f(event);
});
div.on('touchstart', function(event) {
mobile = true;
f(event);
});
div.on('touchend', function(event) {
event.preventDefault();
event.stopPropagation();
});
My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
Check and reopen the keyboard
You will need to do something like this-
<input type="text" style="visibility: hidden; position: fixed; left: -200px" >
With jQuery-
$("#theOffViewBox").focus();
This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.

How to trace all javascript events on page (mobile browser)?

Is there a way to get a log of all events that are generated on a given page? Printing events' names to console for example would be enough.
The reason is to know what happens on a particular user action (http://stackoverflow.com/questions/10071397/is-there-a-way-to-see-that-a-browser-window-is-minimized-while-the-user-is-switc).
If you're debugging Mobile Safari, run iOS >= 5.0 in the iOS Simulator and run iWebInspector. In the Timeline tab you should be able to see every event being fired by the browser after pressing the record button.
if you are using google chrome then you can connect your mobile device to your system using USB and in the google chrome try opening
chrome://inspect/#devices url.
Under Remote Target, the sites you opened in your mobile browser will be listed. You can click inspect to debug the site.
In the console use Monitor Events to track all the events.
for more info, you can check the Remote debug Android devices

Categories

Resources