如何在Page B的iframe中渲染Page A时添加activated类

刚好碰到过类似的需求，得先看两个页面是不是同域，因为浏览器的同源策略会直接影响实现方式，下面分两种场景给你具体方案：

一、Page A和Page B是同域网站 #

这种情况没什么限制，直接操作iframe的DOM就行，步骤很简单：

1. 先给你的iframe加个id，方便后续获取：

<iframe id="pageA-frame" src="https://page_a.com"></iframe>

2. 在Page B的JS里，等iframe加载完再去修改内部元素：

const myIframe = document.getElementById('pageA-frame');
// 监听iframe加载完成事件，避免元素还没渲染就操作
myIframe.onload = function() {
  // 找到Page A里id为stay的那个a标签
  const targetLink = myIframe.contentDocument.getElementById('stay');
  if (targetLink) {
    // 给它加上activated类
    targetLink.classList.add('activated');
  }
};

这样Page A在iframe里加载完成后，目标元素就会自动带上activated类了。

二、Page A和Page B是跨域网站 #

这时候浏览器的同源策略会阻止你直接操作iframe的DOM，得换两种思路来解决：

方案1：用postMessage跨域通信（需要修改Page A的代码） #

这种方式需要Page A配合接收消息，然后自己给自己的元素加类：

• 先在Page A里加一段监听消息的代码：

window.addEventListener('message', function(event) {
  // 一定要验证消息来源，只处理来自Page B的请求，避免安全问题
  if (event.origin !== 'https://page_b.com') return;
  
  if (event.data.action === 'add-activated-class') {
    const targetLink = document.getElementById('stay');
    if (targetLink) targetLink.classList.add('activated');
  }
});

• 然后在Page B里，等iframe加载完发送消息给它：

<iframe id="pageA-frame" src="https://page_a.com"></iframe>
<script>
const myIframe = document.getElementById('pageA-frame');
myIframe.onload = function() {
  // 发送消息给iframe里的Page A，指定目标域名确保安全
  myIframe.contentWindow.postMessage(
    { action: 'add-activated-class' },
    'https://page_a.com'
  );
};
</script>

方案2：通过URL参数传递标识（更简单，同样需要修改Page A） #

如果不想搞跨域通信，可以在iframe的src里加个参数，告诉Page A是从Page B加载的：

<iframe src="https://page_a.com?loadedFrom=pageB"></iframe>

然后在Page A的JS里，读取这个参数，满足条件就给元素加类：

// Page A的代码
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('loadedFrom') === 'pageB') {
  const targetLink = document.getElementById('stay');
  if (targetLink) targetLink.classList.add('activated');
}

这个方案不需要处理跨域消息，只要Page A能改代码就行，非常直观。

小提醒 #

• 不管哪种方案，都要等iframe加载完成再操作，不然元素还没渲染会找不到；
• 跨域场景下一定要做来源验证，别随便处理未知来源的消息或者参数，避免安全漏洞。

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