html5 make a phonecall in ios - javascript

I make a website which can input a telephone number and click a button can make a phonecall with this number. As you do that, it will jump to a telephone app to call someone that you just inputed number(this maybe the browser s work). When hang up the phone, it will jump back to the website.
Here is the question, when come back to the website, how can I know about had hanged up the phone and to display information in the website? Can I get the message use with JS? or it have some event in ios? thank you!
function callto(){
var number = document.getElementById("telnumber").value;
if( number == "" )
{
number = "xxxx";
document.getElementById("telnumber").value = "xxxx";
}
window.location.href = "tel:" + number;
}

You can't, this information is not available. Not even in the native iOS SDK.

Related

Detect if Android or iPhone and show something based on results

I'm trying to display a link based whether a website visitor is use an Android or iPhone mobile device. But I can't seem to get this code I've been working on to actually work. Any help is much appreciated.
I've search Stackoverflow and Google for a solution and all I can find are partial solutions - but nothing I have found has proved successful as of yet.
Here's the code I've been trying to make work.
<p class="iphone">iphoneclass</p>
<p class="android">androidclass</p>
$(document).ready(function() {
if (navigator.userAgent.match(/(iPhone|iPad)/)) {
$('.android').hide();
}
if (navigator.userAgent.match(/(Android)/)) {
$('.iphone').hide();
}
});
here how i check for users' device. maybe this works for you too.
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
// android users
$('.iphone').hide();
} else if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent)) {
// ios users
$('.android').hide();
}
A simple but inelegant way is to try and detect the user-agent string.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
So, something like
const agent = window.navigator.userAgent;
And then you can try and match it against the device by doing some sort of regex search
https://deviceatlas.com/blog/mobile-browser-user-agent-strings

Play Real-time Notification Sound to all the users logged in the Webapp Without reloading the page

I know there are many solutions can be found in the web regarding my problem, but none of them are working for me. That's why I'm asking this question.
First let me explain what I'm looking to achieve -
-> I'm developing a multi-user Web application [ASP.Net]
-> I'm using SignalR to get real-time database change notifications and SignalR instantly transmit the change notifications to all the users logged in the application.
-> Now in addition what I want to do is to play a notification sound for all the logged in users so that they can understand a new notification need attention.
This is what I've done so far -
JavaScript
<script>
function playSound(mysound) {
//thisSound = document.getElementById(mysound);
//thisSound.Play();
var audio = new Audio(mysound);
audio.play();
}
</script>
Code Behind -
ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "OpenWindow", "javascript: playSound('./audio/notification.wav')", True)
The problem with this solution is that the user need to reload the page to hear the notification sound, which I think is pointless if the user can't hear them instantly like the SignalR processing notifications.
Is it possible to push the sound to all the clients so that they don't need to reload the page?
Any help would be highly appreciated. If you need any further clarification please let me know.
Finally I got it worked. I had to change the jquery a little bit -
<script type="text/javascript">
function playSound(mysound) {
//thisSound = document.getElementById(mysound);
//thisSound.Play();
var audio = new Audio(mysound);
audio.play();
}
$(function () {
var notify = $.connection.notificationsHub;
var audio;
notify.client.displayNotification = function (s_Not, s_Path) {
$("#newNot").html(s_Not);
audio = new Audio(s_Path);
var iLevel = "<%=System.Web.HttpContext.Current.Session("USER_LEVEL")%>";
var i_OldNot = "<%=System.Web.HttpContext.Current.Session("NOT_COUNT")%>";
if (iLevel == 2) {
//alert(i_OldNot + " " + s_Not);
if (i_OldNot < i_Not) {
playSound("/audio/notification.wav");
//i_OldNot == Number(s_not);
}
}
};
$.connection.hub.start();
});
</script>
In the code behind I had to set a Session Variable to store the number of last notification before update. If the previous and present number of notification is higher than the session value then notification sound play -
System.Web.HttpContext.Current.Session("NOT_COUNT")= i_LastNotCount
Now the sound is playing without reloading the page. Special thanks to rdans, because of his below comments I got this idea -
Then in a comment you say:
I already have implemented SignalR. So it's not the problem at all.
This suggests to me that you probably don't understand what signalR is doing because the whole point of signalR is to push to the browser without having to post back or use an ajax call.
The time you are executing the user logged in notification using signalR, after that you can Call javascript function from server .
Hope this is what you are looking for.

iframe content doesn't always load

So I have a system that essentially enabled communication between two computers, and uses a WebRTC framework to achieve this:
"The Host": This is the control computer, and clients connect to this. They control the clients window.
"The Client": The is the user on the other end. They are having their window controlled by the server.
What I mean by control, is that the host can:
change CSS on the clients open window.
control the URL of an iframe on the clients open window
There are variations on these but essentially thats the amount of control there is.
When "the client" logs in, the host sends a web address to the client. This web address will then be displayed in an iframe, as such:
$('#iframe_id').attr("src", URL);
there is also the ability to send a new web address to the client, in the form of a message. The same code is used above in order to navigate to that URL.
The problem I am having is that on, roughly 1 in 4 computers the iframe doesn't actually load. It either displays a white screen, or it shows the little "page could not be displayed" icon:
I have been unable to reliably duplicate this bug
I have not seen a clear pattern between computers that can and cannot view the iframe content.
All clients are running google chrome, most on an apple powermac. The only semi-link I have made is that windows computers seem slightly more susceptible to it, but not in a way I can reproduce. Sometimes refreshing the page works...
Are there any known bugs that could possibly cause this to happen? I have read about iframe white flashes but I am confident it isn't that issue. I am confident it isn't a problem with jQuery loading because that produces issues before this and would be easy to spot.
Thanks so much.
Alex
edit: Ok so here is the code that is collecting data from the server. Upon inspection the data being received is correct.
conn.on('data', function(data) {
var data_array = JSON.parse(data);
console.log(data_array);
// initialisation
if(data_array.type=='init' && inititated === false) {
if(data_array.duration > 0) {
set_timeleft(data_array.duration); // how long is the exam? (minutes)
} else {
$('#connection_remainingtime').html('No limits');
}
$('#content_frame').attr("src", data_array.uri); // url to navigate to
//timestarted = data_array.start.replace(/ /g,''); // start time
ob = data_array.ob; // is it open book? Doesnt do anything really... why use it if it isnt open book?
snd = data_array.snd; // is sound allowed?
inititated = true;
}
}
It is definitele trying to make the iframe navigate somewhere as when the client launches the iframe changes - its trying to load something but failing.
EDIT: Update on this issue: It does actually work, just not with google forms. And again it isn't everybody's computers, it is only a few people. If they navigate elsewhere (http://www.bit-tech.net for example) then it works just fine.
** FURTHER UPDATE **: It seems on the ones that fail, there is an 'X-Frames-Origin' issue, in that its set the 'SAMEORIGIN'. I dont understand why some students would get this problem and some wouldn't... surely it depends upon the page you are navigating to, and if one person can get it all should be able to?
So the problem here was that the students were trying to load this behind a proxy server which has an issue with cookies. Although the site does not use cookies, the proxy does, and when the student had blocked "third party cookies" in their settings then the proxy was not allowing the site to load.
Simply allowed cookies and it worked :)
iframes are one of the last things to load in the DOM, so wrap your iframe dependent code in this:
document.getElementById('content_frame').onload = function() {...}
If that doesn't work then it's the document within the iframe. If you own the page inside the iframe then you have options. If not...setTimeout? Or window.onload...?
SNIPPET
conn.on('data', function(data) {
var data_array = JSON.parse(data);
console.log(data_array);
// initialisation
if (data_array.type == 'init' && inititated === false) {
if (data_array.duration > 0) {
set_timeleft(data_array.duration); // how long is the exam? (minutes)
} else {
$('#connection_remainingtime').html('No limits');
}
document.getElementById('content_frame').onload = function() {
$('#content_frame').attr("src", data_array.uri); // url to navigate to
//timestarted = data_array.start.replace(/ /g,''); // start time
ob = data_array.ob; // is it open book? Doesnt do anything really... why use it if it isnt open book?
snd = data_array.snd; // is sound allowed?
inititated = true;
}
}
}

One button -- 3 App stores -- how to redirect the user to the appropriate appstore?

I am wanting to create a simple button which redirects mobile users to the appropriate app store link depending on which mobile os they are running (ios, android or wp8) - or if not on a mobile then offers to send an email containing the appropriate link...Any ideas?
Well... This is actually pretty straightforward. To begin with, you must detect the device the user is currently using by means of their user agent string. And then use jQuery to simply set the href attribute of the anchor element correctly. The following code illustrates.
var operatingSystem, userAgentString = navigator.userAgent;
var link = $("#store");
if (userAgentString.indexOf("iPhone") > -1 || userAgentString.indexOf("iPod") > -1 || userAgentString.indexOf("iPad") > -1) {
operatingSystem = "iOS";
link.attr("href", "http://store.apple.com/us/browse/app");
} else if (/Android/.test(userAgentString)) {
operatingSystem = "Android";
link.attr("href", "https://play.google.com/store/apps?hl=en");
} else if (/Windows Phone/.test(userAgentString)) {
operatingSystem = "Windows Phone";
link.attr("href", "http://www.windowsphone.com/en-us/store");
}
http://jsfiddle.net/5g0zqm0s/
Check the user agent to determine what OS is being run and based on result route link appropriately.
Using php, you can detect which mobile device the user is on. There are several plugins for this. You could then echo out the href of the link accordingly. Sorry, cant comment. Spent too much bounty!

How to detect that user open page using BACK button in browser?

Idea is to display message, which will infor muser that ajax part of application can wokr incorrectly when he used "back" button.
Yes, there is a lot of discussions, but no solutions.
Best from what I found: Store information about last page on server side, and check current page against server info by ajax.
But in this way it would be impossible to use 2 browser windows by same user.
You might want to develope using the url #(hash) to store client state
take a look at http://www.asual.com/swfaddress/, it is used by Flash and ajax to handle browser history with ajax,
Silverlight 3.0 uses a similar technique of using the #(hash) in the url for state.
The real solution is to let the client maintain state, rather than your server. You're breaking the laws of the Internet if you keep so much client state on your server that the back button doesn't work :)
This solution may or may not apply to your case, and it may or may not work with your browser. It seemed to work for me on IE7 where each page had a distinct "widget Id" referenced in the URL querystring -
//try to detect a bad back-button usage;
//widgetId not match querystring parameter did=#
var mustReload = false;
if (location.search != null &&
location.search.indexOf("&did=") > 0)
{
var urlWidgetId = location.search.substring(
location.search.indexOf("&did=")+5);
if (urlWidgetId.indexOf("&") > 0)
{
urlWidgetId = urlWidgetId.substring(
0,urlWidgetId.indexOf("&"));
}
if (currentDashboard != urlWidgetId)
{
mustReload = true;
}
}
if (mustReload)
{
... //reload the page to resynch here
}

Categories