I work with an application that has created it\'s own protocol such like MS did for its MSN client msnim:chat?contact=test@test.com
However, I need to creat
As BHare points out, none of the "multiple popup" approaches seem to work in the latest versions of Chrome. The reason behind that is their detection of "user-initiated" actions as opposed to potentially malicious flooding of user screens with unwanted windows.
In essence, Chrome would allow you to trigger no more than one pop-up per click event. The click event also has to be unique so it cannot trigger a handler that will show popup #1, propagate to the parent and trigger another handler that will show popup #2 etc.
Another failed attempt was made by attempting to distribute the popups (main page initiates popup A that initiates popup B that initiates popup C etc.) - this was recognized as a non-user-initiated action and only one protocol call was ultimately allowed.
It is unfortunate that this behaviour is not controlled by an editable policy, i.e. it cannot be adjusted by allowing popups based on the origin domain.
Depending on deployment specifics (i.e. intranet vs. internet) you may be able to code an extension for Chrome that would initiate the popups at chrome level (meaning browser chrome, effectively any content/style/script that exists outside and above any individual page). Your page can, in turn, detect custom add-on availability and have your "triple links" channelled through to that extension, or prompt the end-user to have the add-on installed. Seeing how you're unable to modify the behaviour of target protocol links (by, for instance, combining the instructions into a single call similar to that of href="mailto:first@email.com,second@email.com,third@email.com") this may be the only option available to you at this stage.
Protocol-specific link would work just as well on the client-side without ever going to the server; you can just add an iframe(s) at runtime with correct src set.
First, let's take good care of the markup. It's demeaning having to manually assign urls to click functions. I've done it the first way that worked and made sense (at the price of html validation), but you could be neater and use custom data-* attributes:
<a href="mailto:first@tempinbox.com" href2="mailto:second@tempinbox.com" href3="mailto:third@tempinbox.com">Click me!</a>
You know what else is demeaning? Having to manually bind click functions - it just takes too much effort. And what if there were two anchors like that? Let's just tell jQuery to bind the click event to every link that uses this protocol:
$('a[href^="mailto:"]').bind("click", function(e){
/*Do stuff*/
});
Before we iterate over the href~href3 attributes, let's write a function that will handle opening individual mailto links:
function openMailto(s){
if (s) $("<iframe />", {src:s, class:"mailto-iframe"}).appendTo("body");
}
It checks that the url is passed from a non-empty attribute, dynamically creates an iframe element and maps attributes to it and "runs" it by appending to body.
Completed here: http://jsfiddle.net/uaLVh/ - extra bonuses include some css to hide helper iframes and to style protocol-specific links. And yes, I know I promised to iterate over href attribures but I've just done it manually.
html
<a href="#">Don't click me</a><br/>
<a href="mailto:first@tempinbox.com" href2="mailto:second@tempinbox.com" href3="mailto:third@tempinbox.com">Click me!</a>
css
/*prevent these iframes from being visible*/
iframe.mailto-iframe{display:none;}
/*bonus: style your protocol-specific links*/
a[href^="mailto:"] {padding-left:20px;background:url(http://sstatic.net/stackoverflow/img/favicon.ico) no-repeat;}
js
$('a[href^="mailto:"]').bind("click", function(e){
//cache "this" link element jquery reference
$this=$(this);
//remove "helper" iframes if any, you don't want to end up with 300 iframes by accident!
$("iframe.mailto-iframe").remove();
//go wild... you could have a nice loop as you're not limited to 3 hrefs
openMailto($this.attr("href"));
openMailto($this.attr("href2"));
openMailto($this.attr("href3"));
//processing href2 and href3 before allowing the default action to happen firstseemed counter-intuitive
e.preventDefault();
return false;
});
function openMailto(s){
if (s) $("<iframe />", {src:s, class:"mailto-iframe"}).appendTo("body");
}
The following HTML/JavaScript code will observe clicks on <a id="click_me">
and create two new iFrames to a URL which can trigger the custom URI scheme you created:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
var imURL = 'http://josh.gitlin.name/9472703.php?id='; // Change this to your URL
function openIM(who) {
var iFrame = '<iframe src="'+imURL+who+'"></iframe>';
$('div#imLinks').append(iFrame);
}
$("a#click_me").click(function(e){
e.preventDefault();
setTimeout(function(){
openIM('1');
}, 100);
setTimeout(function(){
openIM('2');
}, 200);
});
});
</script>
</head>
<body>
<p>Some content here</p>
<p><a href="#" id="click_me">Click Me!</a></p>
<div id="imLinks"></div>
</body>
</html>
The following PHP code is what will be displayed inside those iFrames:
<?php
$screenname = '';
switch($_REQUEST['id']) {
case '1': $screenname = 'firstPerson'; break;
case '2': $screenname = 'secondPerson'; break;
default: $screenname = 'otherPerson'; break;
}
echo <<<END_OF_HTML
<html>
<head>
<meta http-equiv="refresh" content="0;url=aim:goim?screenname=$screenname">
</head>
</html>
END_OF_HTML;
Tested under Safari and Chrome, this will open up multiple IM windows when the link is clicked. Obviously tweak to your satisfaction.