如何获取<object>标签内用户当前访问的网页URL？

我之前也碰到过类似的需求，要拿到<object>里用户导航后的精确URL，核心得区分同源页面和跨域页面两种情况——浏览器的同源策略是关键限制因素：

1. 同源场景（嵌入页面与主页面域名/协议/端口完全一致） #

这种情况最简单，浏览器允许主页面直接访问嵌入页面的window对象，你可以通过contentWindow属性获取当前URL：

// 获取object元素
const webFrame = document.getElementById('webUrl');

// 一定要等object加载完成后再操作，否则contentWindow可能无法访问
webFrame.onload = function() {
    const currentUrl = webFrame.contentWindow.location.href;
    console.log('用户当前访问的URL:', currentUrl);
};

你也可以在需要的时候主动调用（比如点击按钮时），只要确保object已经加载完成就行。

2. 跨域场景（嵌入页面与主页面不同源） #

这时候浏览器的同源策略会阻止你直接访问contentWindow，毕竟跨域访问框架内部信息是严重的安全风险。不过有两种可能的解决思路：

如果你能控制嵌入的pageweb.com站点 #

可以用postMessage机制让嵌入页面主动把当前URL发送给主页面：

• 首先在嵌入页面（pageweb.com的代码里）添加监听，页面加载或导航变化时发送URL：

  // 页面加载完成时发送URL
  window.addEventListener('load', () => {
      // 第二个参数填你的主页面域名，比如'https://your-main-site.com'，不要用*（生产环境）
      window.parent.postMessage(
          { type: 'frameUrl', url: window.location.href },
          'https://your-main-site.com'
      );
  });
  
  // 如果是单页应用，还要监听路由变化（比如hash路由）
  window.addEventListener('hashchange', () => {
      window.parent.postMessage(
          { type: 'frameUrl', url: window.location.href },
          'https://your-main-site.com'
      );
  });
  

• 然后在主页面添加消息监听，接收嵌入页面发来的URL：

  window.addEventListener('message', (event) => {
      // 验证消息来源，只处理pageweb.com发来的消息
      if (event.origin !== 'http://www.pageweb.com') return;
      
      if (event.data.type === 'frameUrl') {
          console.log('用户当前访问的URL:', event.data.url);
          // 这里可以把URL存到变量或者展示到页面上
      }
  });
  

如果你无法控制嵌入的pageweb.com站点 #

很遗憾，出于安全考虑，浏览器不允许你的JS脚本获取跨域框架的URL——你在Chrome右键看到的URL是浏览器本身有权限访问的，但脚本没有这个权限，这种情况下没有直接的解决方案。

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