如何实现跨站点击链接唤起Modal并跳转至目标网站？

Hey there! Let me walk you through how this modal-before-redirect feature works—it’s actually simpler than it might seem at first glance.

1. Build a Redirect Middleman Page #

The link users click points to a dedicated middleman page. This page’s sole job is to display the modal first, then handle the redirect once the user confirms (or after an auto-countdown).

• Key detail: Pass the target website URL as a query parameter to this middleman page (like ?target=https://example.com). This lets the page know where to send users later.

2. Extract the Target URL from Parameters #

First, we need to pull the target URL from the page’s query string. Add this JavaScript to the middleman page:

// Grab the target parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const targetUrl = urlParams.get('target');

// Validate the URL to avoid malicious redirects
if (!targetUrl || !targetUrl.startsWith('http')) {
  // Fallback to a safe page if the target is invalid
  window.location.href = '/';
}

3. Show the Modal on Page Load #

Create a modal in your HTML (hidden by default), then make it visible as soon as the page loads. Here’s a basic example:

<!-- Modal HTML -->
<div id="redirectModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
  <div style="background: white; margin: 10% auto; padding: 2rem; width: 80%; max-width: 500px; border-radius: 8px;">
    <h3>Heads Up!</h3>
    <p>You’re about to leave this site and go to: <em>${targetUrl}</em></p>
    <button id="confirmBtn" style="margin-right: 1rem; padding: 0.5rem 1rem;">Confirm Redirect</button>
    <button id="cancelBtn" style="padding: 0.5rem 1rem;">Cancel</button>
  </div>
</div>

// Show the modal when the page finishes loading
window.addEventListener('load', () => {
  const modal = document.getElementById('redirectModal');
  modal.style.display = 'block';
});

4. Handle Redirect Actions #

Add logic for the modal buttons, plus optional auto-redirect functionality:

const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
const modal = document.getElementById('redirectModal');

// Confirm and redirect
confirmBtn.addEventListener('click', () => {
  modal.style.display = 'none';
  window.location.href = targetUrl;
});

// Cancel and go back
cancelBtn.addEventListener('click', () => {
  modal.style.display = 'none';
  window.history.back();
});

// Optional: Auto-redirect after countdown
let countdown = 5;
const countdownText = document.createElement('p');
countdownText.textContent = `Auto-redirecting in ${countdown} seconds...`;
modal.querySelector('div').appendChild(countdownText);

const countdownTimer = setInterval(() => {
  countdown--;
  countdownText.textContent = `Auto-redirecting in ${countdown} seconds...`;
  if (countdown <= 0) {
    clearInterval(countdownTimer);
    window.location.href = targetUrl;
  }
}, 1000);

5. Optional: Add a Link Generator Tool #

To make it easy to create these links, build a simple form that takes a target URL and outputs the middleman link:

<form id="linkGenerator" style="margin: 2rem;">
  <input type="url" id="targetInput" placeholder="Enter target website URL" style="padding: 0.5rem; width: 300px;">
  <button type="submit" style="padding: 0.5rem 1rem;">Generate Redirect Link</button>
</form>
<p id="generatedLink"></p>

document.getElementById('linkGenerator').addEventListener('submit', (e) => {
  e.preventDefault();
  const target = document.getElementById('targetInput').value;
  if (target) {
    // Replace with your middleman page URL
    const redirectLink = `https://your-middleman-page.com?target=${encodeURIComponent(target)}`;
    document.getElementById('generatedLink').innerHTML = `Your link: <a href="${redirectLink}" target="_blank">${redirectLink}</a>`;
  }
});

Important Notes #

• Security First: Always validate the target URL to prevent malicious redirects (only allow HTTP/HTTPS links, avoid relative paths or suspicious addresses).
• User Trust: Clearly state the target URL in the modal—transparency helps users feel safe clicking through.
• Browser Compatibility: The code above works for all modern browsers, but if you need to support older ones, you might need to polyfill URLSearchParams.

内容的提问来源于stack exchange，提问作者Jonny Jordan