I’m writing an AJAX application so every link on my page is a javascript link (href="javascript:void(blahblah)"). Some of them opens small webpages in an iframe in a boxed, absolutely positioned div element (that can be dragged around).
This looks nice but if the user middle click on the link he can’t open the page in a new tab, because the browser tries to execute the script on a new page which fails.
So what I want to do is:
- If the user clicks on the link it opens a webpage in an iframe in an absolutely positioned div. (this works currently).
- If the user middle clicks these links (or somehow opens the link in a new tab/window etc.) the page should load in the new tab/window as expected.
- Optional: middle click should do nothing on all other javascript links.
Is there a (preferably cross browser) way to accomplish this?
EDIT: this web app is a browser game which uses the canvas element to render the game world, so I don’t mind if your solution works only in canvas-capable browsers.
Yes, don’t do
href="javascript:void(blahblah)", build on things that work.