如何从iframe中获取子页面URL？跳转后需获取主域名URL

嘿，这个问题的核心其实绕不开浏览器的同源策略——这是浏览器的安全屏障，直接限制了跨域页面之间的DOM访问。下面分两种常见场景给你可行的解决思路：

场景1：让iframe在跳转到login.php时自动加载主站内容 #

如果你的需求是：当嵌入的iframe自动跳转到www.facebook.com/login.php时，把iframe的内容切换回www.facebook.com的主站页面，可以这么做：

• 如果你是Facebook内部开发者（父页面与Facebook同源），可以直接监听iframe的加载事件并修改URL：

const targetIframe = document.getElementById('your-iframe-id');

targetIframe.addEventListener('load', () => {
  try {
    const currentUrl = new URL(targetIframe.contentWindow.location.href);
    // 检测是否跳转到了login.php路径
    if (currentUrl.pathname.includes('/login.php')) {
      // 强制加载主域名内容
      targetIframe.src = 'https://www.facebook.com';
    }
  } catch (err) {
    console.error('无法访问iframe URL：同源策略限制', err);
  }
});

• 但绝大多数情况下，你的父页面和Facebook是不同源的，上面的代码会直接抛出错误。这种时候，你可以尝试用MutationObserver监听iframe的src属性变化：

const targetIframe = document.getElementById('your-iframe-id');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'src') {
      const newSrc = mutation.target.getAttribute('src');
      if (newSrc.includes('/login.php')) {
        targetIframe.src = 'https://www.facebook.com';
      }
    }
  });
});

observer.observe(targetIframe, { attributes: true });

注意：这种方式只能检测到iframe的src被主动修改的情况，如果是iframe内部的跳转（比如点击链接跳转），MutationObserver可能捕获不到——因为内部跳转不会改变iframe的src属性，只是改变了iframe内部的页面状态。

场景2：在父页面中获取主域名www.facebook.com的内容 #

如果你的需求是把主站的内容拿到父页面里展示，那直接跨域请求Facebook的页面内容会被CORS策略完全阻止。这种情况下，你只能通过Facebook官方提供的Graph API来获取公开的内容，比如主页信息、帖子等，因为Facebook不会允许外部页面直接抓取它的页面内容。

重要提醒 #

• 绝对不要尝试绕过浏览器的同源策略（比如使用代理或者第三方爬虫工具），这不仅违反安全规范，还可能触发Facebook的反爬机制，导致你的IP被封禁。
• 如果是开发和Facebook相关的嵌入应用，优先使用官方提供的SDK或嵌入组件（比如Facebook社交插件），它们已经处理好了跨域和权限问题，能避免很多麻烦。

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