JavaScript中打开邮件客户端时添加当前页面URL至主题的问题

Got it, let's break down why this is happening and fix it. The problem is that static mailto links in HTML are just plain text strings—browsers don't execute JavaScript code inside them. So when you write window.location.href directly in the subject parameter, it shows up as literal text instead of the actual page URL.

To solve this, you need to dynamically build the mailto link using JavaScript so that window.location.href gets evaluated to the real URL before the mail client opens. Here's how to do it properly:

Key Step: Encode the URL #

First, always use encodeURIComponent() on the page URL (and any dynamic values) to escape special characters like ?, &, and =—these would break the mailto parameter structure if left unencoded.

Option 1: Trigger Email on Button/Link Click #

If you want to open the mail client when a user clicks a button or link, add a click handler that builds the full mailto link on the fly:

// Attach click event to your button/link
document.getElementById("send-inquiry").addEventListener("click", function() {
  // Get and encode current page URL
  const currentPageUrl = encodeURIComponent(window.location.href);
  
  // Replace these with your actual product variables
  const productID = "PROD-123";
  const productName = "Wireless Headphones";
  const productLink = "https://yourstore.com/products/wireless-headphones";
  
  // Build the complete mailto link
  const mailtoUrl = `mailto:demo@demo.com?subject=Inquiry regarding item [${productLink}], [${productName}] | Page: ${currentPageUrl}&body=%0D%0AInquiry regarding item [${productID}], [${productName}]!%0D%0A${productLink}`;
  
  // Open the mail client
  window.location.href = mailtoUrl;
});

Corresponding HTML:

<button id="send-inquiry">Send Inquiry</button>

Option 2: Dynamically Set a Link's href Attribute #

If you have a static link in your HTML and want to populate its mailto URL when the page loads, use this approach:

// Run when the page finishes loading
document.addEventListener("DOMContentLoaded", function() {
  const currentPageUrl = encodeURIComponent(window.location.href);
  
  // Your product data
  const productID = "PROD-123";
  const productName = "Wireless Headphones";
  const productLink = "https://yourstore.com/products/wireless-headphones";
  
  // Build the mailto link
  const mailtoUrl = `mailto:demo@demo.com?subject=Inquiry regarding item [${productLink}], [${productName}] | Page: ${currentPageUrl}&body=%0D%0AInquiry regarding item [${productID}], [${productName}]!%0D%0A${productLink}`;
  
  // Update the link's href attribute
  document.getElementById("inquiry-link").setAttribute("href", mailtoUrl);
});

HTML for this option:

<a id="inquiry-link" href="#">Send Inquiry via Email</a>

Why This Works #

By building the mailto link in JavaScript, we're evaluating window.location.href to its actual value (the current page URL) before constructing the string. Encoding ensures that any special characters in the URL don't mess up the mailto parameters, so everything shows up correctly in the email subject and body.

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