simplest cross-browser check if protocol handler is registered
When user clicks link with custom protocol (like myapp://superlink)
I need either launch an app or allow user to download and run configuration app
I am looking for cross-browser way to check if custom protocol is registered
I've tried to determine this by checking user agent server-side (for IE)
[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform] "myapp"=""
sends
`....NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; **myapp**`
as user-agent
This is good, clean way, easy configuration:
just download .reg file and run it or propagiate via ms windows policy
I can't fix this for Chrome and Firefox
Are there any client-side solution (in js)?
My enviroment: IE8+, Chrome (latest), Firefox(latest)
Answers:
There is this old tricks that it always never fails me.
The core functionality that you need is setTimeout. I will tell you in detail:
setTimeout(function() {
window.location = "http://itunes.com/app/yourapplocation";
}, 200);
// once you do the custom-uri, it should properly execute the handler, otherwise, the settimeout that you set before will kick in
window.location = "myapp://superlink";
Now you mentioned that it maybe a link or links so I made this nice function just for your convenience:
HTML code
<a href="myapp://superlink" data-href-alt="http://itunes.com/app/yourapplocation">Click here</a>
JS code
$("a[href*='myapp://']").click(function(e)
{
var el = $(this);
setTimeout(function() {
window.location = el.data("data-href-alt");
}, 200);
// once you do the custom-uri, it should properly execute the handler, otherwise, the settimeout that you set before will kick in
window.location = el.data("href");
e.preventDefault();
});
Hope this will help you :)
I had a similar problem where I needed to check whether a custom protocol is already registered (which will open an executable file), or otherwise open a download page or do something else. Unfortunately there is no easy way to deal with this since every browser behaves differently. I tried to collect all information and come up with a rather generic library for this matter, you can take a look at:
https://github.com/ismailhabib/custom-protocol-detection
ps: the solution for non Windows 8 IE is rather ugly, but I couldn't find a better solution.
kororo's solution wouldn't work for me for some reason, so I managed with this slightly modified solution instead.
<html>
<a id="link">Click Me</a>
<script>
var link = document.getElementById('link');
var timeout;
window.addEventListener('blur',function(e){
window.clearTimeout(timeout);
})
link.addEventListener('click', function(e) {
timeout = window.setTimeout(function() {
console.log('timeout');
window.location = "https://myapp.net";
}, 1000);
window.location = "myapp://";
e.preventDefault();
});
</script>
</html>
Update to Korono's answer, this worked for me:
$(function() {
var timeIndex;
$("a[href*='myapp://']").blur(function(e)
{
clearTimeout(timeIndex);
});
$("a[href*='myapp://']").click(function(e)
{
var el = $(this);
timeIndex = setTimeout(function() {
window.location = el.attr("data-href-alt");
}, 200);
// once you do the custom-uri, it should properly execute the handler, otherwise, the settimeout that you set before will kick in
window.location = el.attr("href");
e.preventDefault();
});
});
Salaam
Install ismailhabib/custom-protocol-detection
By including this JS file protocolcheck.js
Then write code something like this
<div id="protocol" href="myprotocol:[email protected]">Check Protocol</div>
<script>
$("#protocol").click(function (event) {
protocolCheck($(this).attr("href"), function () {
alert("protocol not recognized");
});
event.preventDefault ? event.preventDefault() : event.returnValue = false;
});
</script>