jQuery检测浏览器重定向及iframe点击等待提示问题求助

Hey there! Let's work through this issue you're facing. First, let's break down why your initial approach didn't work: wrapping the iframe with a CSS element probably created an overlay that blocked clicks on the iframe's button—so your jQuery ran, but the button itself was unclickable. Let's fix that and cover reliable ways to detect the redirect too.

方法1：同域iframe的最佳方案（监听beforeunload事件） #

如果你的iframe和父页面是同域的，这是最稳妥的实现方式：

1. 先准备好等待提示层，和iframe同级放置（不要覆盖iframe，避免遮挡点击）：

<div class="wait-message" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; padding:20px; background:white; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.15);">
  Please wait...
</div>
<iframe id="target-iframe" src="your-iframe-content-url"></iframe>

2. 然后通过两种方式触发提示：

const iframe = document.getElementById('target-iframe');
const waitMsg = document.querySelector('.wait-message');

// 方案A：直接监听iframe的跳转前事件（最精准）
iframe.contentWindow.addEventListener('beforeunload', () => {
  waitMsg.style.display = 'block';
});

// 方案B：监听iframe内按钮的点击事件（如果需要更精准触发）
iframe.contentWindow.document.querySelector('#your-button-id').addEventListener('click', () => {
  waitMsg.style.display = 'block';
});

这样既不会遮挡按钮，又能在页面即将重定向时及时显示提示。

方法2：跨域iframe的替代方案 #

如果iframe是跨域的，浏览器同源策略会阻止你直接访问iframe内部元素或监听beforeunload，可以试试这些变通方案：

方案A：监听iframe点击+unload事件 #

跨域下无法直接获取iframe内的按钮，但可以监听整个iframe的点击，同时结合unload事件判断跳转：

const iframe = document.getElementById('target-iframe');
const waitMsg = document.querySelector('.wait-message');

// 监听iframe的点击（父页面层面）
iframe.addEventListener('click', () => {
  waitMsg.style.display = 'block';
});

// 监听iframe的卸载事件（跨域下多数浏览器支持）
iframe.addEventListener('unload', () => {
  // 页面即将跳转，提示可以保持到跳转完成
});

注意：这个方法的小缺点是，用户点击iframe内非按钮区域也会触发提示，如果iframe内有其他可点击元素，需要额外判断。

方案B：利用postMessage通信（需控制iframe内容） #

如果你有权限修改iframe内的代码，可以让iframe主动给父页面发消息触发提示：

• iframe内的按钮点击逻辑：

document.querySelector('#your-button-id').addEventListener('click', () => {
  // 向父页面发送触发提示的消息
  window.parent.postMessage('show-wait-notice', '*');
});

• 父页面监听消息：

window.addEventListener('message', (event) => {
  if (event.data === 'show-wait-notice') {
    document.querySelector('.wait-message').style.display = 'block';
  }
});

这是跨域场景下最精准的方案，前提是你能修改iframe的代码。

为什么之前的CSS包裹方法失效？ #

你之前用CSS包裹iframe，应该是用了一个覆盖层（比如position:absolute的div盖在iframe上），这会导致iframe内的按钮无法接收点击事件——点击被上层的div拦截了。正确的做法是把提示层和iframe同级放置，默认隐藏，需要时再显示，而非覆盖iframe。

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