如何使用Javascript阻止满足if语句后的window重定向及页面重定向拦截

Hey there! Let's tackle your two questions about controlling page redirects—these are super common scenarios when building web apps, so I’ll break down practical, actionable solutions for both.

Sometimes you only want to stop a redirect when a specific condition is true (like unsaved user changes). The approach depends on how the redirect is triggered:

Case 1: Redirects via window.location assignment #

If the redirect is initiated directly with window.location.href (or replace/assign), you can either wrap the assignment in your condition, or intercept the location property if you don't control the redirect code.

Option A: Control the redirect directly #

If you own the code that triggers the redirect, add your condition check first:

// Your custom condition (e.g., user hasn't saved form data)
const hasUnsavedChanges = /* your logic here */;

// Only redirect if the condition isn't met
if (!hasUnsavedChanges) {
  window.location.href = "https://your-target-url.com";
} else {
  alert("Wait! You have unsaved changes—please save before leaving.");
}

Option B: Intercept third-party redirects #

If the redirect comes from code you can't modify (like a third-party script), override the window.location properties to add your condition check:

// Save the original location setter and methods
const originalHrefSetter = Object.getOwnPropertyDescriptor(window.location, 'href').set;
const originalReplace = window.location.replace;
const originalAssign = window.location.assign;

// Override the href setter
Object.defineProperty(window.location, 'href', {
  set: function(newUrl) {
    const shouldBlock = /* your condition */;
    if (!shouldBlock) {
      originalHrefSetter.call(this, newUrl);
    } else {
      console.log("Redirect blocked:", newUrl);
      alert("Redirect blocked due to unsaved changes!");
    }
  },
  get: function() {
    return window.location.href;
  }
});

// Override replace and assign methods too
window.location.replace = function(newUrl) {
  const shouldBlock = /* your condition */;
  if (!shouldBlock) originalReplace.call(this, newUrl);
  else console.log("Blocked replace redirect:", newUrl);
};

window.location.assign = function(newUrl) {
  const shouldBlock = /* your condition */;
  if (!shouldBlock) originalAssign.call(this, newUrl);
  else console.log("Blocked assign redirect:", newUrl);
};

Case 2: Redirects via link clicks or form submissions #

For <a> tags or <form> elements that trigger navigation, listen to their events and prevent the default action when your condition is met:

// Block link clicks
document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a');
  if (targetLink && targetLink.href) {
    const shouldBlock = /* your condition */;
    if (shouldBlock) {
      e.preventDefault();
      alert("You can't navigate right now—please finish your task first.");
    }
  }
});

// Block form submissions
document.addEventListener('submit', (e) => {
  const shouldBlock = /* your condition */;
  if (shouldBlock) {
    e.preventDefault();
    alert("Please complete all required fields before submitting.");
  }
});

To catch all types of redirects (scripted location changes, link clicks, form submits, window.open, etc.), combine these approaches into a single solution:

Step 1: Intercept all window.location changes #

As above, override the href setter and replace/assign methods to add your blocking logic:

// Save original methods
const originalHrefSetter = Object.getOwnPropertyDescriptor(window.location, 'href').set;
const originalReplace = window.location.replace;
const originalAssign = window.location.assign;

// Override href
Object.defineProperty(window.location, 'href', {
  set: function(newUrl) {
    if (allowRedirect(newUrl)) originalHrefSetter.call(this, newUrl);
    else console.log("Blocked redirect to:", newUrl);
  }
});

// Override replace and assign
window.location.replace = (newUrl) => allowRedirect(newUrl) ? originalReplace.call(this, newUrl) : console.log("Blocked replace:", newUrl);
window.location.assign = (newUrl) => allowRedirect(newUrl) ? originalAssign.call(this, newUrl) : console.log("Blocked assign:", newUrl);

Step 2: Block window.open #

Prevent new windows/tabs from opening if they're part of a redirect:

const originalOpen = window.open;
window.open = (url, target, features) => {
  if (allowRedirect(url)) return originalOpen.call(this, url, target, features);
  else {
    console.log("Blocked window.open to:", url);
    return null;
  }
};

Step 3: Handle link clicks and form submits #

Add event listeners to block user-initiated navigation:

// Block link clicks
document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (link && link.href && !allowRedirect(link.href)) {
    e.preventDefault();
    console.log("Blocked link navigation to:", link.href);
  }
});

// Block form submissions
document.addEventListener('submit', (e) => {
  const formAction = e.target.action || window.location.href;
  if (!allowRedirect(formAction)) {
    e.preventDefault();
    console.log("Blocked form submission to:", formAction);
  }
});

Step 4: Define your redirect rules with allowRedirect #

Create a reusable function to decide which redirects to allow or block. Customize this based on your needs:

function allowRedirect(url) {
  // Example rules:
  // Allow same-origin URLs, block external ones
  const targetOrigin = new URL(url).origin;
  const isSameOrigin = targetOrigin === window.location.origin;
  
  // Or block specific domains
  const blockedDomains = ["https://bad-example.com", "https://another-blocked-site.com"];
  const isBlockedDomain = blockedDomains.includes(targetOrigin);
  
  // Return true to allow, false to block
  return isSameOrigin && !isBlockedDomain;
}

Step 5: Warn users before unexpected page unloads #

If you want to prevent users from closing the tab or navigating away without confirmation, use the beforeunload event:

window.addEventListener('beforeunload', (e) => {
  const shouldWarnUser = /* your condition, e.g., unsaved changes */;
  if (shouldWarnUser) {
    // Browsers will show a default confirmation message (custom text is often ignored for security)
    e.preventDefault();
    e.returnValue = "";
    return "";
  }
});

Pro tip: If you're using a single-page framework like React or Vue, don't forget to use their built-in router guards (e.g., React Router's useNavigate blockers or Vue Router's beforeRouteLeave) to handle app-specific navigation.

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