How can I request a user to stay, when they clicked a link to go another website. But no request if they want to go another page on my website?

Question

Here the link has been set with a picture. If user click the picture, they will be ask to leave or stay in my-website. If leave clicked the they will be directed to link-website. The problem is, if I want to go to anyother page within my website from this part, it still request leave or stay. I want that the reqruest will be only for the link but not for mywebsite´s pages. I know that I have to make a condition, to check. But no clue how to do it.

<body onbeforeunload="return myFunction()">
   <a href="http://link-website.com/"><img class="alignnone wp-image-1353 size-full"src="http://my-website/wp-content/uploads/2015/07/picture-name.png" alt="picture-name" width="xxx" height="xxx" /></a>

<script>
function myFunction() {
return "Are you sure ";
}
</script>
</body>

Give me a second and I'll close with the correct answered question. — Praveen Kumar Purushothaman, Jul 07 '16 at 13:30
Don't use onbeforeunload, use a click handler for clicks on anchors, and within the handler you'll have a reference to the clicked element so you can test its href value and decide whether to cancel the click. — nnnnnn, Jul 07 '16 at 13:30
Give me a second and i'll find a duplication of this question .. — ZEE, Jul 07 '16 at 13:31
@epascarello - In the case that you've prompted them to stay and they've agreed. (Note that this question asked only about links, not about leaving the website by closing the tab or by the back button or whatever.) — nnnnnn, Jul 07 '16 at 13:36
@PraveenKumar That's not a relevant dupe. I guess OP knows about beforeunload event and it is not the question — A. Wolff, Jul 07 '16 at 13:37
@PraveenKumar In fact i reread your dupe and indeed it could be relevant — A. Wolff, Jul 07 '16 at 13:38
@nnnnnn OP only want onbefoerunload to fire when they click on external links. So canceling the click of the link has nothing to do with it. The clicked link needs to be checked if it is the same domain, if it is, than the OP needs to remove the onbeforeunload. If it is a different domain, than nothing needs to be done. — epascarello, Jul 07 '16 at 13:38
@epascarello - My original comment said to *not* use onbeforeunload, but instead achieve the desired result from a general anchor click handler. Then on click you can check the href and prompt when appropriate and cancel when appropriate. (Again, the question only refers to link navigation, so you don't need onbeforeunload.) — nnnnnn, Jul 07 '16 at 13:41
I think it is more relevant dupe, see [here](http://stackoverflow.com/questions/18932464/javascript-onbeforeunload-disable-for-links/18932521#18932521). Now OP would use selector to check for internal links, e.g: `$(document).on('mousedown', "a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']", offBeforeUnload)` — A. Wolff, Jul 07 '16 at 13:44
@Dayle Salmon Yes, I want use also use popup. Can you please give me an example with a picture link?? — Shovon, Jul 07 '16 at 13:56
@shovon i've updated my answer if you want to give that a try. — Dayle Salmon, Jul 07 '16 at 14:18

Dayle Salmon · Answer 1 · 2016-07-07T14:17:38.397

Here is some code that should point you in the right direction, you will need to obviously add in your pop up logic etc.

UPDATED ANSWER

You will need to include the magnific js/css files which can be found here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#including-files

$('a').on('click', function(event){
    event.preventDefault(); //Prevent default href action
    var aHref = $(this).Attr('href'); //get the href from the button clicked

    //If your domain exists in HREF...
    if(aHref.indexOf('YOURDOMAIN.com') >= 0){
        // link straight to your page(INTERNAL)
        window.location.href = aHref;
     }else{
        //Launch Popup
        $.magnificPopup.open({
            items: {
                src: "<div class='white-popup'><h2>You are about to leave our website...</h2><p>Are you sure this is what you want to do?</p><button class='yes'>Yes<button><button class='no'>No</button></div>",
                type: 'inline'
            },
            callbacks: {
                // When pop up opens, call the yes/no button logic
                open:function(){
                    // want to go away
                    $('a.yes').on('click', (function(){
                        //Go to EXTERNAL site when yes clicked
                        window.location.href = aHref;
                    });
                    // Want to stay
                    $('a.no').on('click',function(){
                        // Close pop up if no clicked
                        $.magnificPopup.close();
                    });
                }
            }
        }); 
    }  
});

I don't get the logic behind it. Nesting anchor click events?! Now, to get default anchor behaviour, user needs double click and even it doesn't handle specific behaviour has opening link in new tab/window, etc... — A. Wolff, Jul 07 '16 at 13:39
I thought he'd be using a pop up or something to display the yes/no buttons. If he isn't using a pop up or whatever then onbeforeunload should be used. — Dayle Salmon, Jul 07 '16 at 13:48
@Dayle Salmon Yes, I want use also use popup. Can you please give me an example — Shovon, Jul 07 '16 at 13:58
@Shovon, I can't give you an example. But i've done something in the past using the magnific pop up library. Let me update my answer if you were to use that as the pop up. — Dayle Salmon, Jul 07 '16 at 14:00

How can I request a user to stay, when they clicked a link to go another website. But no request if they want to go another page on my website?

1 Answers1