I'd like to add an onbeforeunload javascript, asking the user to bookmark the page (there's a small button in the header for that purpose).
The problem is, no matter if they'd like to bookmark it, it's pointless and annoying after running once.
So, what's a generic solution to stop a javascript from running more than once?
Thanks,
Emilia.
EDIT:
Yes, I guess an onload event would be more appropriate?
I don't really want to add "big red buttons"...
Any basic example how a IP validation + script would look like?
I would say it's already a bad idea to use a pop up when the user wants to exit the page even if it is only once, it's annoying and obtrusive. I suggest you place a big button on site itself if you want to call the visitor to an action, bookmarking in this case.
If you still want to though, you should use IP validation and not cookies, cookies are temporal, they can be removed by the user, and visitors will not like to be presented the same suggestion over and over.
Related
Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.
I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.
i use this code to prevent clickjacking :
if (top == self || parent != top || document.location.hostname != document.domain) { top.location.replace("https:\/\/www.mysite.com\/?404");}
can someone break into my code ?
note: i don't want to use x-frame-option
thanks
From an Iframe you cannot really control clicks from the parent, if they click inside the Iframe but another event is watching it, you cannot really prevent it being from a different domain.
But all is not lost, the Iframe itself cannot stop it, but it can be wrapped with something like this. This is assuming jquery, might be best to translate to a native version for your application, in the interest of showing an example I will use jQuery.
<div id="i_wrap"><iframe src="SRC"></iframe></div>
<script>
$('#i_wrap').on('click',function(event){
event.stopPropagation();
});
</script>
Of course this is not a cure-all, there are still ways around this. You could also use a portion of the new HTML 5 cross document messaging read here on it to do some validation and possible warn the user on an unsafe site (if your iframe gets no message, then you show no button).
Though I have no experience in the cross document messaging methods, and I am sure they probably don't allow different domains (though there may be ways around that, to an extent).
Though this question is not totally clear and I may not be understanding it perfectly, if you update your question with more details I will update my answer to suit.
I have a javascript alert asking the user to insert a password. When user presses button, I will do an AJAX call to check the password. This could generate another alert with the response (if it was accepted or not), but I wonder if it is possible to have the AJAX response change the text of my first alert? Is it even possible to override the alert button's default not to close itself when clicking "okay"?
I think generally you should try and minimize the use of alerts in your web application. They are very obtrusive and annoying. Generally people just update the DOM to display user information. An alert is for something more unique and important than somebody just mistyping their password.
EDIT:
As other people are pointing out, you should use modal dialogs instead to have behavior as you specify.
I'm quite sure you can't do that since the way the alert is constructed and displayed is different in each browser (just look at mobile browsers). I think you'll safeguard your sanity longer if instead you use modal dialogs.
Being a blocking function, alert() is an abomination in itself, and owing to that would thwart the very thing you are trying to do.
I'm looking to implement a warning if the user attempts to leave the order process before it's completed in any fashion other then of course following the payment button.
Something like this:
<script type="text/javascript">
window.onbeforeunload = function(){
return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
};
if document.getElementsByClassName('eStore_buy_now_button').onclick = function(){
};
</script>
I'm sure that's detrimentally wrong in a few ways, but it's the best way I can illustrate what I'm trying. And I understand some browsers will display default text instead of the actual warning I've written, that's fine.
A few notes, I'd rather use plain old JS instead of loading up jQuery for just this one simple task. There are no settings on the page so it's a simple leave page or click "Buy Now" operation.
UPDATE:
I assure you it's not for my sake, it's for the user's sake. Although it's explicitly explained (what to do), I think user's are jumping the gun and leaving before the process is truly finished out of an instant gratification, ignore the messages kind of mentality. It's a simple 2-step process, they submit the details for the project and then make payment. For whatever reason they're submitting details and then not following through with payment about 50% of the time. And then they'll follow up "So, are you working on the project or what?" and then I have to explain "You never finished your order." They follow up with a "Whoops, here ya go."
Unfortunately, I would chalk this up as marketing and web design 101. Rule #1, people are dumb. Not to be taken in a rude or pessimistic sense. Basically, the idea is assume everyone is dumb in your design, instruction so that you make something so easy a five-year-old can do it. I totally agree with not holding users hostage. But this page is ONLY reached in the middle of their intended order process that THEY initiate (this page will never be reached in a browsing sort of way). So I think it's a pretty legitimate use case where you're saving a common user mistake from themselves. A demographic of customers that are not tech-savvy, so they honestly need such guidance.
document.querySelector('.eStore_buy_now_button').addEventListener("click", function(){
window.btn_clicked = true; //set btn_clicked to true
});
window.onbeforeunload = function(){
if(!window.btn_clicked){
return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
}
};
This will alert the user whenever the page unloads (eg leaving the page) until btn_clicked is set to true.
DEMO: http://jsfiddle.net/DerekL/GSWbB/show/
Don't do it.
There is a fine line in terms of usability - on one hand sometimes I may have intended to place an order but accidentally left the page; on the other hand it could get annoying pretty quickly. When abrowser is set up to save previous session (i.e. reopen tabs on next launch) and one page behaves this way, you'll end up with only that tab re-opened next time (confirmed on Mac Safari), discarding the rest of the tabs. They'll not be buying from you again!
I'd suggest you make it clear to the user by means of inline messages that the order has not been submitted yet and they still need to confirm their action, but if they were to accidentally navigate away you should make it easy to pick up where they left off. Would be fairly trivial to store such info in a cookie so that on subsequent page visits the user would be prompted with "you have an incomplete order for ..., would you like to finish it now?"
As an alternative, you could use rely on an inactivity alert (think of online banking prompting you when your session is about to expire) to bring the user back to the "complete order" page if they get distracted.
If you are certain you want to rely on this event, the answers to this question may provide better insight. Basically, the functionality or its implementation beyond a basic text warning should not be relied onto because of inconsistent (?) implementation across browsers as well as possibility of having it blocked by the user.
Another update:
Prompted by Derek's comment on this approach being used by Gmail etc., I've come across an article suggesting you stick with onunload instead and rely on AJAX calls to save the state of the page - which backs my thoughts on allowing the user to pick up where they left even if the javascript event is never triggered.
Is it possible that the html page loaded, cannot be refreshed or reloaded by the user
Thanks..
No, and you shouldn't try to do this...it breaks all the users expectations of what a webpage does.
Whether it's code or behavior, when you're having trouble doing something, it's usually because it hasn't been done or hasn't been made easy...stop to ask why that is, and often you'll find there's a good reason.
The onbeforeunload event could be used to detect a situation like this.
I think this is what SO uses when you write an answer and then want to leave before you post it; it asks you if you are sure.
Is that what you want to use it for or what?
Is there a better way to collect data on how many visitors don't have js enabled. My idea was to add a hidden value at page load with js. If it works then js was successful. But looks like there's no way to actually read it back to know if it was successful unless I do some kind of a page reload, but now it gets complicated (I have to delay whatever operations that were about to happen, etc. so as I said gets complicated). Any tips or ideas on this? I'm sure there's a better practice way than mine.
I should add, if there's already a ready-made solution for this, please let me know, I'm not really interested in reinventing the wheel :)
A good way to do this is use a <noscript><img src="track.php" width="1" height="1" /></noscript>, and that will allow for browsers without javascript to pull a tracking image and then the server can get the Useragent and IP from that tracking image.
You can't know in advance which technologies the user is using client-side, so the only way to know for sure is after the first load. Even so, he might disable JS after the first page load and you're left running with a different scenario.
In fact, try it here in SO: load a page with JS enabled, then disable and reload. You'll see a big red banner at the top telling you this page works better with JS enabled.
Bottom line: you should never rely on client's technology, unless you really want to limit the people reaching your site. If you want to reach the most number of people, you should code as if they had every technology, and none at the same time.