如何让WebView精准在指定框架（JCGameIFrame）中执行脚本？

1. 定位并选中JCGameIFrame框架 #

首先要准确获取目标iframe元素，根据页面中iframe的定义方式，有两种常用方法：

• 如果iframe带有id="JCGameIFrame"：

  const iframe = document.getElementById('JCGameIFrame');
  

• 如果iframe是通过name="JCGameIFrame"定义：

  const iframe = document.querySelector('iframe[name="JCGameIFrame"]');
  

注意：必须确保iframe加载完成后再操作，否则无法访问其内部上下文，可通过监听load事件确保时机：

iframe.addEventListener('load', () => {
  // 后续操作写在这里
});

2. 在iframe中执行target脚本 #

根据target脚本的存在形式，选择对应执行方式：

方式一：直接调用iframe内的全局target函数 #

如果target已经是iframe页面中的全局函数，直接通过iframe的contentWindow调用：

iframe.contentWindow.target();

方式二：动态注入target脚本 #

如果target脚本是外部文件或需要动态插入到iframe中：

const script = document.createElement('script');
// 若target是外部脚本，指定路径
script.src = '/path/to/target.js';
// 若target是内联脚本，直接写入内容
// script.textContent = `function target() { /* 你的脚本逻辑 */ } target();`;
iframe.contentDocument.body.appendChild(script);

3. 模拟DevTools的层级选择功能 #

DevTools的层级选择本质是切换上下文（父页面 ↔ iframe），并在对应上下文中选择元素，我们可以实现类似的上下文切换能力：

实现上下文切换工具函数 #

function getIframeContext(iframe) {
  return {
    // 获取iframe内的document对象
    doc: iframe.contentDocument,
    // 获取iframe内的window对象
    win: iframe.contentWindow,
    // 在iframe内选择单个元素
    $: (selector) => iframe.contentDocument.querySelector(selector),
    // 在iframe内选择多个元素
    $$: (selector) => iframe.contentDocument.querySelectorAll(selector)
  };
}

使用示例（类似DevTools操作流程） #

// 切换到JCGameIFrame上下文
const iframeCtx = getIframeContext(iframe);
// 在iframe内选择目标元素（对应DevTools选中iframe后选元素）
const targetElement = iframeCtx.$('#some-element-in-iframe');
// 执行target脚本并传入选中的元素
iframeCtx.win.target(targetElement);

跨域场景注意事项 #

如果JCGameIFrame的域名与父页面不同，浏览器会阻止直接访问contentWindow或contentDocument，此时需要通过postMessage通信实现：

• 父页面发送指令：

  iframe.contentWindow.postMessage({ type: 'RUN_TARGET' }, 'https://iframe-domain.com');
  

• iframe内监听消息并执行脚本：

  window.addEventListener('message', (e) => {
    if (e.origin === 'https://parent-domain.com' && e.data.type === 'RUN_TARGET') {
      target(); // 执行target脚本
    }
  });
  

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