Verify Departure on External Links within Wordpress

Question

Verify Departure on External Links within Wordpress

Let me set the stage for you:

We're dealing with a bank website here. So, whenever a user wants to click on an external link (could be to a Facebook page or a partner website), we need to have a notification box pop up saying "You are about to leave this page, none of this content is managed by...etc.".
The user should then have the option to either click 'confirm' to open the external link in a new window or click 'cancel' to stay on the website and receive another message saying "you have chosen not to leave the site".

This particular site is built with Wordpress, so I'm on the hunt for an easy solution to manage this without having to manually add custom Javascript to each and every link.

I've seen it function smoothly on their current site: . I believe I can replicate it on the new site by incorporating a confirm_entry script in the header and applying customized Javascript to each link, but I'm struggling to make the links open in a new window.

This method is quite time-consuming as it requires individually editing all external links. Is there a simpler way to identify external links and apply this feature across the entire site? If not, what steps can I take to ensure the links open in a new window?

Check out the code snippet I'm currently using:

    <script type="text/javascript">
        <!--
            function confirm_entry(varible_value)
            {
            input_box=confirm("Link Disclaimer:  Bank Name  provides links to web pages which are not part of the Bank Name website or clearmountainbank.com or online.bankname.com domains. These sites are not under Bank Name control, and Clear Mountain Bank is not responsible for the information or links you may find there. Bank Name is providing these links only as a convenience. The presence of these links on any Bank Name website is not intended to imply Bank Name endorsement of that site, but to provide a convenient link to relevant sites which are managed by other organizations, companies, or individuals.");
            if (input_box==true)

            { 
            window.location.href=varible_value; 
            }

            else
            {
            // Output when Cancel is clicked
            alert ("You have opted not to leave Bank's website.");
            }

            }
        -->
    </script>

javascript php jquery html wordpress

Answer 1

Answer №1

If you were looking for a solution, here is one possible way to achieve it (Check out JSFiddle):

$("a").on("click", function() {
    if($(this).attr("href").indexOf("http://") == 0) {
        return confirm("Please confirm your action");
    }
});

This method only handles links with http:// and not https://. It also does not verify if the link is within your current domain, but it provides a starting point for addressing the issue.

Answer 2

If you were looking for a solution, here is one possible way to achieve it (Check out JSFiddle):

$("a").on("click", function() {
    if($(this).attr("href").indexOf("http://") == 0) {
        return confirm("Please confirm your action");
    }
});

This method only handles links with http:// and not https://. It also does not verify if the link is within your current domain, but it provides a starting point for addressing the issue.

Answer 3

Answer №2

I struggled with implementing the confirm() function, but after exploring various Q&A's, I devised an alternative solution:

Opening external links in new windows and tracking outbound clicks
Creating a JQuery confirm dialog
Utilizing WordPress and jQuery UI CSS Files
Finding hosted jQuery UI themes online
Understanding why jQuery UI 1.10 removed jquery dialog zIndex option

You can incorporate the provided code snippet into your theme's functions.php file, but it is recommended to create a separate plugin for this purpose. Learn more about this approach here.

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_22382151' );
add_action( 'wp_header', 'print_header_so_22382151' );
add_action( 'wp_footer', 'print_footer_so_22382151' );

/**
 * Enqueue jQuery Dialog and its dependencies
 * Load jQuery UI theme from Google CDN
 */
function enqueue_scripts_so_22382151() {
    wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery-ui','jquery') );
    wp_enqueue_style( 'jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css' );
}    


/**
 * Implementing custom styles for the dialog
 */
function print_header_so_22382151() { 
    ?>
    <style>
        /* Customizing the appearance of jQuery UI dialogs */
        .ui-front {
            z-index:1000000 !important; /* Overriding the default z-index value */
        }
        .ui-widget-overlay {
            opacity: .8;
        }
    </style>
    <?php
}

/**
 * Injecting script for the dialog functionality
 */
function print_footer_so_22382151() { 
    $current_domain = $_SERVER['SERVER_NAME'];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          $('a[href^="http://"],a[href^="https://"]')
            .not('[href*="<?php echo $current_domain; ?>"]')
            .click(function(e) {
                e.preventDefault();
                var url = this.href;
                $('<div></div>').appendTo('body')
                    .html('<div><h6>Link Disclaimer:  [...].</h6></div>')
                    .dialog({
                        modal: true, title: 'message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                window.open(url);
                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
            })
        });
    </script>
    <?php 
}

Answer 4

I struggled with implementing the confirm() function, but after exploring various Q&A's, I devised an alternative solution:

Opening external links in new windows and tracking outbound clicks
Creating a JQuery confirm dialog
Utilizing WordPress and jQuery UI CSS Files
Finding hosted jQuery UI themes online
Understanding why jQuery UI 1.10 removed jquery dialog zIndex option

You can incorporate the provided code snippet into your theme's functions.php file, but it is recommended to create a separate plugin for this purpose. Learn more about this approach here.

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_22382151' );
add_action( 'wp_header', 'print_header_so_22382151' );
add_action( 'wp_footer', 'print_footer_so_22382151' );

/**
 * Enqueue jQuery Dialog and its dependencies
 * Load jQuery UI theme from Google CDN
 */
function enqueue_scripts_so_22382151() {
    wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery-ui','jquery') );
    wp_enqueue_style( 'jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css' );
}    


/**
 * Implementing custom styles for the dialog
 */
function print_header_so_22382151() { 
    ?>
    <style>
        /* Customizing the appearance of jQuery UI dialogs */
        .ui-front {
            z-index:1000000 !important; /* Overriding the default z-index value */
        }
        .ui-widget-overlay {
            opacity: .8;
        }
    </style>
    <?php
}

/**
 * Injecting script for the dialog functionality
 */
function print_footer_so_22382151() { 
    $current_domain = $_SERVER['SERVER_NAME'];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          $('a[href^="http://"],a[href^="https://"]')
            .not('[href*="<?php echo $current_domain; ?>"]')
            .click(function(e) {
                e.preventDefault();
                var url = this.href;
                $('<div></div>').appendTo('body')
                    .html('<div><h6>Link Disclaimer:  [...].</h6></div>')
                    .dialog({
                        modal: true, title: 'message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                window.open(url);
                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
            })
        });
    </script>
    <?php 
}

Verify Departure on External Links within Wordpress

Answer №1

Answer №2

Similar questions

Tips for using rspec to test front end functionality?

The catalog search feature is malfunctioning in Magento version 1.9.0.1

It is not possible to access fields in Firestore using Node.js

Making the Select Tag function as an on-click event in JQuery

Dealing with an Incorrect Date in JavaScript

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests

Is it possible to implement a jQuery function instead of utilizing an iframe? Iframe tends to have a longer loading time, so using a

A guide on retrieving bytecode from a specific PDF using Angular

What is the best way to embed two controllers within an AngularJS webpage?

Error: The JSONP request encountered an unexpected token, causing a SyntaxError

The required keys [:id] are not included in the route matches

Discovering how to navigate to a link within a web table using Cypress has been a challenge, as I keep receiving the error message stating that the element is not visible due to its CSS property being

Trouble with buttons in table cells

script locate the div ID within a given text and clear its content

Steps for creating a "search within a specified distance" feature

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

Sending numerous HTML forms using a sole submit button through AJAX

I'm having trouble locating the module "script!foundation-sites/dist/foundation.min.js on Heroic."

Click event binding with getter/setter in jQuery

The issue arises when the d3 startAngle and endAngle values are set to NaN, resulting in an