如何在JavaScript中实现POST请求并嵌入隐藏iframe避免页面刷新？

Got it, let's get your POST request working without reloading the main page using a hidden iframe. Here's a solid, tested approach to solve this:

Why This Works #

Using a hidden iframe as the target for a form submission lets the POST request run in the background—your main page stays intact because the response loads into the invisible iframe instead of replacing your current page.

Full Working Code #

// Helper to create a hidden iframe (only once)
function setupHiddenIframe() {
  // Check if iframe already exists to avoid duplicates
  const existingIframe = document.querySelector('iframe[name="postTargetIframe"]');
  if (existingIframe) return existingIframe;

  const iframe = document.createElement('iframe');
  iframe.name = 'postTargetIframe';
  // Hide the iframe completely
  iframe.style.cssText = 'width:0; height:0; border:0; display:none;';
  document.body.appendChild(iframe);
  return iframe;
}

// Function to send POST request via hidden iframe
function sendHiddenPost(url, postData) {
  const iframe = setupHiddenIframe();
  
  // Create a temporary form element
  const form = document.createElement('form');
  form.action = url;
  form.method = 'POST';
  form.target = iframe.name; // Route submission to the hidden iframe

  // Add all POST parameters as hidden inputs
  Object.entries(postData).forEach(([key, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = value;
    form.appendChild(input);
  });

  // Append form to DOM (required for submission) and submit
  document.body.appendChild(form);
  form.submit();

  // Clean up the form after submission (keeps DOM tidy)
  setTimeout(() => {
    if (document.body.contains(form)) {
      document.body.removeChild(form);
    }
  }, 200);
}

// Example usage
sendHiddenPost('https://your-target-url.com/submit', {
  userId: 123,
  action: 'updateProfile',
  preferences: JSON.stringify({notifications: true})
});

Key Fixes & Notes #

• Target Matching: The form's target property must exactly match the iframe's name—this is probably what was missing in your original code.
• Hidden Inputs: All POST data is added as hidden form fields, which is the standard way to send data via form submission.
• Avoid Duplicates: The setupHiddenIframe function checks for an existing iframe so we don't create multiple ones if you call sendHiddenPost multiple times.
• Cleanup: We remove the temporary form after submission to keep your DOM uncluttered.

Edge Cases to Consider #

• Cross-Domain Requests: If your target URL is on a different domain, browser security policies might restrict accessing the iframe's response content. But the submission itself will still work fine—this method is safe for cross-domain POSTs where you don't need to read the response.
• CSP Restrictions: If your site has a Content Security Policy, make sure it allows form submissions to your target URL and allows creating iframes.

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