无法修改iframe内银行表单，实现表单提交后整页跳转的方案

嘿，这个场景我太熟悉了！很多开发者在接入第三方支付/表单时都会碰到这个问题——没法修改人家的页面代码，却要控制提交后的跳转行为。给你分两种情况来提供解决方案：

因为浏览器的安全限制（同源策略），你没法直接修改iframe里的银行表单代码，所以得靠监听iframe的加载状态来实现：

核心思路是：表单提交后，iframe会加载新的跳转页面，父页面能捕捉到这个load事件。我们可以用一个标记来区分「第一次加载表单」和「提交后跳转」这两种情况。

直接上代码：

// 获取你嵌入的信用卡iframe
const creditCardIframe = document.querySelector('iframe[src="http://example.com"]');
// 标记是否已经完成表单的初始加载
let hasInitialLoad = false;

creditCardIframe.addEventListener('load', () => {
  if (hasInitialLoad) {
    // 第二次触发load事件，说明表单已经提交并跳转了
    try {
      // 尝试获取iframe跳转后的地址（跨域时会报错）
      const redirectUrl = creditCardIframe.contentWindow.location.href;
      // 如果能拿到，就让父页面跳转到这个地址
      window.location.href = redirectUrl;
    } catch (error) {
      // 跨域拿不到地址时，跳转到你自己预设的结果页面
      window.location.href = '/your-payment-result-page';
    }
  } else {
    // 第一次加载完成，更新标记
    hasInitialLoad = true;
  }
});

小技巧：如果银行的跳转页面有固定的特征（比如URL里包含/payment-confirmation），可以在try块里加个判断，只有符合这个特征时才跳转，能避免用户刷新iframe导致的误跳转。

如果刚好你和银行用了同一个域名，那操作就简单多了——直接修改iframe内表单的target属性为_top，这样提交后就会直接在父窗口跳转：

const creditCardIframe = document.querySelector('iframe[src="http://example.com"]');

creditCardIframe.addEventListener('load', () => {
  // 同域下可以直接访问iframe里的DOM元素
  const paymentForm = creditCardIframe.contentDocument.querySelector('form');
  if (paymentForm) {
    // 设置target为_top，提交后整页跳转
    paymentForm.target = '_top';
  }
});

• 测试的时候尽量用正式环境的域名，有些浏览器对localhost的跨域限制比较宽松，可能会导致你在本地测试正常，但上线后出问题。
• 如果银行的表单用了AJAX异步提交而不是传统的表单跳转，那load事件不会触发，这时候可能需要联系银行，看他们是否支持通过postMessage来通知父页面提交状态——不过这种情况很少见。

内容的提问来源于stack exchange，提问作者I am the Most Stupid Person