I need to handle when Internet Explorer (6, 8 and 9) window is closed, in order to ask his confirmation on it. I tried the unbeforeunload, but, as you might know, it's triggered also when any link is clicked, o a form is submited. Some can say to use event mouse coordinates, but there are several ways to break such a validation (Alt+F4 for ex.). There's also a way to set some variable to true when clicking links and check if in the event, but that does not work neither, as I got lots of various links on my pages, and the event is triggered multiple times in some cases.
Also I tried to solve the problem using frames, like: make 2 frames, put my pages to one frame, and to the other (with zero size) put a page with onbeforeunload handler. That would work just fine, but we work with a set of environment js, that we can't prevent to download, and those scripts remove any frames on the page, putting the entire page in the main window - fail…
Can anybody, please, suggest anything else?
If you are going to use onbeforeunload (and it sounds right), you should have a flag that is set so that the event only bothers asking if there is a reason to stay on the page.
var hasChanges = false;
window.onbeforeunload = function() {
if (hasChanges) {
return "You have changes that will be lost if you continue leaving the page";
};
};
Then you just have to set the variable to true (hasChanges = true) if there is a reason to stay on the page...so if nothing has changed, clicking your other links will not trigger the dialog.
Related
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
I've got dialog that I wrote and it closes when clicking outside (no overlay/backdrop).
It works nicely unless there's an iframe, in which case my listener on outside clicks is never called.
Here is a JSBIN to illustrate the problem. (http://jsbin.com/vuneyopedu/edit?js,console,output)
To briefly explain in the below screenshot:
Clicking RED Dialog Increments.
Clicking Outside Dialog (YELLOW and GREEN) should Decrement but only YELLOW works.
The event listener for outside clicks is never called when clicking iframe (GREEN)
Question is - How do I make clicking anything outside the RED square (specifically clicking the iframe) decrement the number. (or close the dialog, in the "real" world)
How about binding event to iframes' document.
iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);
iframesArray.forEach(function(frame) {
frame.contentWindow.document.addEventListener('click', function() {
inc();
}, true);
});
The correct approach here is to use a modal and one of the strongest use-cases for the modal. By design modals prevent clicks from falling through to elements below hence there is no need to handle side effects like your iframe issue or e.stopPropagation() or anything else. It also makes positioning very clean.
As a side note, the currently accepted answer is a very poor approach since it relies on adding an event handler inside the iFrame, then binding that onto the parent container window. This is wrong on many levels: no separation of concerns, iframe from different domains will be blocked due to CORS, iframe will register with any and all parents even when not needed, etc.
Suppose I have a link, which would fade out the entire page when link is clicked. The reason I fade out the page is because a next page is about to load, but it is not loaded yet. I can use pointer-events: none which will disable any mouse events until the next page is loaded.
Suppose it was done with the keyboard, I could use the following to prevent double-enter, or to cleanly disable all elements within, for example tab-enter would be disabled this way as well.
parent.onkeydown = fals
parent.onkeyup = fals
parent.onkeypress = fals
function fals() {return false}
This works well for short loads, but if it takes a long time to load, the user may notice the following difficulties.
Cannot tab away from the a tag.
Cannot use several of the keyboard shortcuts which would control the browser.
Able to tab into the disabled area from the address bar.
Is there a modern and slick way to prevent these 3 problems, other than setting an onfocus=blur for all of the child elements? I do not care about IE today.
I think the commonly accepted way of dealing with things like what you're talking about is to use Modal's, which is to say when they click that link, you pop up a box that says 'Processing' or something like that, and you create a fullscreen div with a z-index above everything else so the user can't click / interact with anything else on the screen until you're done doing whatever it is you are doing.
See http://twitter.github.com/bootstrap/javascript.html#modals for an example of what i'm talking about.
I have a requirement that I need to create a link to open a form in a new window and then when I click the same link it will focus on the existing window again.
this works well with the following code
<input type="button" value="Click" onclick = "return OpenWindow();"/>
<script>
var win = null;
function OpenWindow()
{
if (win == null || win.closed)
{
win = window.open('http://localhost/Conditions.aspx', 'Condition');
}
win.focus();
return false;
}
</script>
However, I experienced a problem, when I switch to different page and come back to the page which has the link. the variable win will not retain the previous reference.
If I click the link again, it will refresh the existing window (which is not what I want!) and then focus on it.
Is there any way that I can keep variable reference? or does anyone know how to solve this problem?
I had the same issue and was resolved on Window.open only if the window is not open
If you basically want the window focused instead of refreshed when the link is clicked, even if the parent window has been closed, re-opened, or changed, this will do the trick.
I was about to resort to using cookies.
Chia, your problem is that JS doesn't persist across pages.
HTML is stateless, so the JS that sits on top also needs to "forget" what it did on page-1, after you move on to page-2 and page-3.
There are ways of storing strings and numbers, and retrieving them on other pages, but that's not what you're looking for.
And to that end, there's nothing you can really do, with your current setup.
There are different ways of allowing you to keep the child reference (do main-page navigation inside of an iFrame in the main page... if you really, really have to... or AJAX in the page changes, for people with capable browsers, and use old-fashioned navigation for browsers with worse JS engines).
But it's not going to be possible for you to open window2, click on a link which points window1 at page3, and still have page3 have a reference to window2.
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.