无法访问源码时，如何实现全屏iframe登录按钮点击跳转？

这个需求完全可行！具体实现得看你的主页面和iframe里的登录页是不是同域（也就是协议、域名、端口全一致），下面分两种场景给你详细方案：

一、同域场景（最简单直接） #

如果主页面和iframe内的登录页是同域的，你可以直接通过JavaScript获取iframe里的登录按钮，绑定自定义的跳转事件：

1. 先给iframe加个ID方便定位：

<iframe id="loginIframe" src="你的登录页地址" frameborder="0" style="width:100%;height:100vh;"></iframe>

2. 在主页面的JS里监听iframe加载完成，再绑定点击事件：

// 等待iframe加载完毕再操作内部元素
document.getElementById('loginIframe').addEventListener('load', function() {
  // 替换成你实际的登录按钮选择器（比如类名、ID）
  const loginBtn = this.contentDocument.querySelector('.login-submit-btn');
  if (loginBtn) {
    loginBtn.addEventListener('click', function(e) {
      // 可选：阻止按钮原本的默认行为（比如提交表单）
      e.preventDefault();
      // 跳转到你的目标页面
      window.location.href = '你的跳转目标地址';
      // 如果想让跳转在iframe内发生，就用下面这行：
      // this.contentWindow.location.href = '你的跳转目标地址';
    });
  }
});

二、跨域场景（需要特殊处理） #

如果主页面和iframe是跨域的，浏览器的同源策略会阻止你直接操作iframe内的元素，这时候可以用下面几种方法：

方法1：借助postMessage通信（需iframe开发者配合） #

如果你能联系到iframe登录页的开发者，让他们在用户点击登录按钮时给主页面发送一个消息：

• 对方需要在iframe内添加的代码：

document.querySelector('.login-submit-btn').addEventListener('click', function() {
  // 向主页面发送触发登录的消息，建议把*换成你的主页面域名更安全
  window.parent.postMessage('login-clicked', '*');
});

• 主页面监听消息并跳转：

window.addEventListener('message', function(event) {
  // 验证消息来源，防止恶意请求，替换成你的iframe实际域名
  if (event.origin !== 'https://你的iframe域名.com') return;
  if (event.data === 'login-clicked') {
    window.location.href = '你的跳转目标地址';
  }
});

方法2：监听iframe的URL变化（无需对方配合） #

如果没法让iframe开发者配合，你可以观察iframe的URL变化——通常登录按钮点击后会跳转到回调页或者修改URL，通过检测这个变化触发跳转：

const iframe = document.getElementById('loginIframe');
let lastUrl = iframe.src;

// 每隔500ms检测一次URL变化，可根据需求调整间隔
setInterval(function() {
  try {
    const currentUrl = iframe.contentWindow.location.href;
    if (currentUrl !== lastUrl) {
      // 替换成登录成功后URL包含的特征关键词（比如/login-success）
      if (currentUrl.includes('login-success')) {
        window.location.href = '你的跳转目标地址';
      }
      lastUrl = currentUrl;
    }
  } catch (e) {
    // 跨域下部分浏览器会抛出权限错误，忽略即可
  }
}, 500);

方法3：全屏遮罩层映射按钮（兜底方案） #

如果上面的方法都走不通，你可以在主页面加一个透明的全屏遮罩层，在对应位置放一个“映射按钮”，模拟点击效果：

<!-- 透明遮罩层，确保不遮挡iframe内容但能接收点击 -->
<div id="loginMask" style="position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;"></div>
<!-- 映射按钮，位置和iframe里的登录按钮完全一致 -->
<button id="fakeLoginBtn" style="position:fixed;top:450px;left:50%;transform:translateX(-50%);width:180px;height:40px;opacity:0;cursor:pointer;"></button>

document.getElementById('fakeLoginBtn').addEventListener('click', function() {
  // 如果同域可以触发真实按钮点击，跨域的话直接跳转即可
  // document.getElementById('loginIframe').contentDocument.querySelector('.login-submit-btn').click();
  window.location.href = '你的跳转目标地址';
});

注意：这个方法需要你准确知道登录按钮的位置，一旦iframe内按钮位置变动，映射按钮也要跟着调整，适合临时应急使用。

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