Click a link and use window.open() blocks one of the links - javascript

I'm trying to create a simple JS function that will open a new window/tab when clicking a specific button, so the user will actually open 2 windows/tabs, however no matter what I do, one of the links gets blocked by Chrome as a "popup-blocked".
I'd like to do something like this:
$(document).ready(function(){
$("a").mousedown(function(){
window.open("https://stackoverflow.com/","_blank");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click Me!
;
But when I do this, the button link doesn't work, but the JS does.
If I change the JS and add a setTimeout() to it, the button URL goes through but the JS gets blocked.
No matter what I do, I can't get both of them to go through.
Any help would be appreciated.

Navigating to two places at once, with one in a new window, is really popular with people who want to show the user a massive advert in a new window.
Massive adverts are unpopular with users, so browsers take steps to prevent this behaviour.
Sometimes legitimate uses get caught in the crossfire. Blame the blackhat end of the advertising industry.
You'll need to find some other way to display… whatever it is you want to display… to the user that doesn't involve navigating to multiple webpages at the same time in separate windows.

The problem is caused by the mousedown() event you are using which is a part of down+up sequence to trigger the click() event of the <a> tag.
so opening a new window "breaks" the flow and browser is not tracking for the mouse-up event anymore to follow the original url.
so the solution is to attach the click() event instead without stopping propagation. this will fire the attached and original events and none of them will be blocked.
$(document).ready(function(){
$("a").click(function(){
window.open("https://stackoverflow.com/","_blank");
});
})
you can try sample on this page as stackoverflow snippet is sandboxed and is blocking popups

Related

IE9 firing onbeforeunload event when the window opens

I'm building a site using the JFileUpload applet and want to handle the closing of a page in a certain way. JSTransferCancelled is called when the applet is cancelled. The following code is what I'm using to handle these events and it works in all browsers except IE.
function JSTransferCancelled(){
bCancel=false;
$.post("cancel.php");
self.close();
}
$(window).load(function(){
$(window).bind('beforeunload',function(){
document.uploader.setEnabled(false);
if(bCancel){ document.uploader.cancel();}
});
});
I open the page with the uploader on it in a new tab from the main site and want to close it when they cancel the upload. When I open the tab in IE, however, I instantly get the alert saying The webpage you are viewing is trying to close this tab. Do you want to close this tab? [OK] [Cancel] and my uploader is both inaccessible because of the setEnabled(false) call and cancelled because of the cancel() call.
What I'm looking for is the same functionality, just in IE. I know there are many many many issues in IE with events like onbeforeunload with it triggering in response to different things, but I've checked for all of those problems in my site and haven't found anything. I haven't run into anything online that deals with the kind of problem I'm having.
I've tried wrapping the onbeforeunload function in different things such as the load function above as well as $(document).ready(), but they either give me the same problems or create new ones.
Check Microsoft's Ridiculous Documentation Then make sure none of the code you are using does anything they list as a trigger to invoke beforeunload, which includes several things that do not actually unload the page (go Microsoft!)

disable onclick ads with a content-script in Google Chrome

There are some video streaming sites that pop up an ad anytime you click anywhere on the page. The problem is, you have to click on the page to press play! So I was thinking of making a UserScript that disables the script that does this. The only problem is, I already disable all the scripts on the site and when I do it still pops up. Is there a way that I can disable them ? I'm also using jQuery, so if I can do it through their interface, that would be great.
edit: Two perfect examples of such sites are daclips.in and gorrilavid.in
I have Adblocker Plus, and it seems like it is not recognizing "on Click" events as pop-ups, rather normal clicked links. And the logic is simple, no Adblocker will block you from clicking something intentionally and it (the link) opening in another window/tab.
The problem is the new window contains your clicked Url, while the original window/tab "Refreshes" (i.e. redirects) to another url.
Advertising companies seem to use this trick to bypass adblocking software.
Just ditch Chrome and use Firefox. Firefox already have built-in mouse-click popups. I think all addons like Adguard or Adblock can not disable mouse-click popups. If you use Firefox, these are the steps:
Type about:config in the browser's address bar and hit the enter key.
First time users need to confirm that they be careful on the next page.
Type or paste dom.popup_allowed_events into the search field.
The value of the preference highlights all events that are allowed to spawn popups.
Edit the value to remove some or all of the items here.
Why not just use a browser extension such as AdBlock?
https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom?hl=en
My go-to is right click and open in new tab. onClick events only happen with a left click. It's cumbersome but it still ends up being less work than closing the pop-up and whatever annoying prompts it may have.
I do not there's a practical solution for this.
Moreover, I think some of the answers here are missing the specific case in OP, where clicking anywhere on the page will cause the pop up to happen, not just clicking on links. According to this, neither right-clicking then choosing "open", nor noticing and blocking the target URL will help. I do not know of an add blocker that helps here either, because it's not trivial to meaningfully filter a click event that is taking place on the whole page object.
Only the solution provided by #Monkey would work, at the drawback of possibly breaking other things.

Using BOTH Href & click listener

I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");

JavaScript click event

My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).
I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above.
Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.
Do you have any idea as how to solve my problem ?
Thanks.
have you tried window.open('url')?
see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.
You might also try removing the onclick, and using
EDIT
There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links
As that site says, you can instead create an id for the element and bind it through javascript.
**Taken from that link:
...
And then in your JS, hook the link via it's ID to do the AJAX call.
Remember that you need to stop the click event from bubbling up. Most
frameworks have an event killer built in that you can call (just look
at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Without jQuery, it might look like this:
document.getElementById('thisLink').onclick = function(e)
{
//do someting
e.stopPropagation();
}
Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.

Simulate real mouse click

What I want to do is execute a mouse click say on youtube to press play when the page loads. How do I click that specific location (assuming it is always in the same location)?
I have tried and failed with
var e = document.getElementById('myelem'); e.click();
var e = new jQuery.Event("click");e.pageX=x;e.pageY=y;$("#elem").trigger(e);
and stuff like that. nothing really works. Any suggestions? I am using google chrome
alright it seems like there has been a little confusion so I will further explain. I have created a popup tied to a keystroke event what I want to do is trigger x-webkit-speech by clicking the microphone that is in my popup so that the user does not have to click it themselves. I have tried a bunch of ways like above and have not been successful. After this my program will be done so I really would love some help thanks :]
In general, browsers won't let simulated mouse clicks trigger "real" actions, e.g. a jQuery click() won't cause the browser to follow a link. Otherwise, spammers could trigger banner clicks on every page load (among other more malicious uses).
According to http://www.filosophy.org/2011/03/talking-to-the-web-the-basics-of-html5-speech-input/:
Eventually, it will be possible to invoke the speech-recognition directly with the startSpeechInput() method, but to my knowledge this is not implemented in any of the current browsers.
I suggest waiting for Chrome to implement the API so that you can trigger speech input from JavaScript.
<button id="myButton" onClick="alert('You clicked me!');">Click me</button>
document.getElementById("myButton").click();
http://fiddle.jshell.net/Shaz/HgyeZ/
That's with regular clickable items though. But with YouTube Videos, you could also append &autoplay=1 to the end of the url (if it's embedded into a page).
http://fiddle.jshell.net/Shaz/tcMCa/

Categories