嵌入外部站点至iframe后无法选中元素，该如何解决？

你遇到的核心问题是浏览器的同源策略限制：你的页面和剑桥词典的域名属于不同源（协议、域名、端口任一不同就算跨域），浏览器为了安全，禁止父页面直接访问跨域iframe内部的DOM元素，所以你用frame.contents().find('#stateHdr')根本拿不到目标元素。

下面给你几个可行的解决方向：

1. 用服务器端代理绕过跨域 #

自己搭一个简单的后端接口，让后端去请求剑桥词典的页面内容，然后把返回的HTML直接渲染到你的页面里（不用iframe）。这样页面和渲染的内容属于同源，就能直接用JS选中元素了。

前端逻辑示例：

async function loadPageContent() {
  // 调用自己的后端接口获取目标页面HTML
  const res = await fetch('/api/proxy?url=https://dictionary.cambridge.org/dictionary/english/provenance');
  const html = await res.text();
  // 创建容器存放HTML
  const container = document.createElement('div');
  container.innerHTML = html;
  document.body.appendChild(container);
  // 直接选中目标元素
  const selected = container.querySelector('#stateHdr');
  console.log(selected);
}

后端只需要做请求转发，把目标页面的HTML返回即可，具体实现可以用Node.js、Python等任意后端语言。

2. 用浏览器扩展/油猴脚本 #

在浏览器扩展或油猴脚本环境下，同源策略限制会被放宽，你可以直接访问跨域iframe的内容。比如写一个油猴脚本：

// ==UserScript==
// @name         剑桥词典元素获取
// @match        *://你的页面域名/*
// @grant        none
// ==/UserScript==

function addIframe() {
    const iframe = document.createElement("iframe");
    iframe.style.display = "block"; // 改为block方便测试
    iframe.id = 'cambridge-iframe';
    iframe.src = 'https://dictionary.cambridge.org/dictionary/english/provenance';
    document.body.appendChild(iframe);

    iframe.onload = function() {
        // 扩展环境下可直接访问iframe内部DOM
        const selected = iframe.contentDocument.querySelector('#stateHdr');
        console.log(selected);
    };
}

addIframe();

3. 调用官方API（优先推荐） #

查询剑桥词典是否有官方提供的查询API，直接通过API获取单词释义等数据，不用嵌入整个页面。这种方式最稳定，也不会有跨域问题。

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