Alert users before visiting external websites

Question

Alert users before visiting external websites

Is there a way to notify users about external pages without using popups like in the first example here: https://i.sstatic.net/5QJLu.png

Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be taken?

For instance, check out this successful example from another website: https://i.sstatic.net/9SVEk.png

Appreciate any suggestions or advice you may have. Thank you!

javascript html jquery css hyperlink

Answer 1

Answer №1

If you want to ensure that all clicks are captured and checked to determine if they are on an anchor from a different domain, here is the code snippet you can use:

document.body.addEventListener("click", function(evt) {
  evt.preventDefault();
  var anchor = evt.target.closest("a")
  if (anchor && anchor.href && anchor.host !== window.location.host) {
    document.querySelector(".message").classList.add("active");
    window.setTimeout(function () {
      window.location.href = anchor.href;
    }, 5000);
  }
});

.message {
  display: none;
}

.message.active {
  display: block;
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: red;
}

<a href="https://www.example.com">Example</a>
<a href="/">Same Domain</a>

<div class="message">
  Whatever you want to say.
</div>

Note: This code does not account for scenarios where users open links in new tabs or windows using keyboard shortcuts. To address this, many organizations opt to include an icon next to external links as a visual indicator.

Answer 2

If you want to ensure that all clicks are captured and checked to determine if they are on an anchor from a different domain, here is the code snippet you can use:

document.body.addEventListener("click", function(evt) {
  evt.preventDefault();
  var anchor = evt.target.closest("a")
  if (anchor && anchor.href && anchor.host !== window.location.host) {
    document.querySelector(".message").classList.add("active");
    window.setTimeout(function () {
      window.location.href = anchor.href;
    }, 5000);
  }
});

.message {
  display: none;
}

.message.active {
  display: block;
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: red;
}

<a href="https://www.example.com">Example</a>
<a href="/">Same Domain</a>

<div class="message">
  Whatever you want to say.
</div>

Note: This code does not account for scenarios where users open links in new tabs or windows using keyboard shortcuts. To address this, many organizations opt to include an icon next to external links as a visual indicator.

Alert users before visiting external websites

Answer №1

Similar questions

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

Search for and swap out every item in a multi-tiered array

Unusual occurrence involving label span and the use of italic font styling

Problems arising from positioning elements with CSS and organizing list items

Is it possible to serve CSS using relative paths that go beyond the URL root?

Modify the hue of the div as soon as a button on a separate webpage is

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

Can HTML tags be utilized in swipeable pages?

Challenge encountered when attempting to detect multiple submit buttons using jQuery

Effortless Form Filling using PHP Ajax

Difficulty updating Material UI table

Ways to receive alerts when a marker enters a polygon

Do not display the outcome of the unsuccessful Ajax registration attempt

Tips for labeling subplots in PLOTLY JS

Developing a personalized Avada form auto-scrolling algorithm

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

What is the best way to execute synchronous calls in React.js?

Installation of the package was unsuccessful: npm encountered an error with code ERESOLVE, indicating that it was unable to destructure the property 'name' from 'node' as it is currently null

The functionality of RegExp is not as expected in this specific case, even though it works correctly in all

Guide to Embedding an Image in a List in HTML