如何使用Javascript在iframe内部获取该iframe的属性值

同域场景（父页面与iframe加载的页面协议、域名、端口完全一致） #

你之前尝试的window.class和window.className是错误的，这两个属性访问的是iframe内部的window对象，并非父页面中挂载的iframe DOM元素本身。
你可以直接通过window.frameElement获取当前iframe对应的DOM节点，再读取对应属性即可：

// iframe内部运行的JS代码
const currentIframe = window.frameElement;
// 获取class属性值
const iframeClass = currentIframe.className; // 输出结果为 myClass
// 也可以通过getAttribute方法获取
const iframeClass2 = currentIframe.getAttribute('class');

跨域场景 #

如果父页面和iframe页面不同源（比如你示例中iframe加载的是google.com，和你的父页面域名不一致），受浏览器同源策略限制，window.frameElement会返回null，无法直接读取iframe属性，需要通过postMessage进行跨域通信实现：

1. 父页面添加监听，接收iframe的请求后返回对应属性

// 父页面运行的JS代码
window.addEventListener('message', (event) => {
  // 校验消息来源，避免安全风险
  if (event.origin !== 'https://你的iframe页面的域名') return;
  if (event.data === 'requestIframeClass') {
    const targetIframe = document.getElementById('myId');
    event.source.postMessage({
      iframeClass: targetIframe.className
    }, event.origin);
  }
})

2. iframe内部发送请求，接收父页面返回的属性值

// iframe内部运行的JS代码
// 向父页面发送获取属性的请求
window.parent.postMessage('requestIframeClass', 'https://你的父页面的域名');
// 监听父页面的返回结果
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://你的父页面的域名') return;
  if (event.data?.iframeClass) {
    console.log('获取到的iframe class值：', event.data.iframeClass);
  }
})

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