如何基于iframe.contentWindow执行eval函数并保留原window访问权

要让eval（或等效方法）执行的代码将window指向iframe的contentWindow，同时外部代码仍可访问原window，可以通过以下几种方式实现：

方法一：使用Function构造函数（推荐） #

Function构造函数允许我们指定执行代码的参数，通过将iframe的contentWindow作为window参数传入，让代码内部的window指向该iframe窗口，外部代码不受影响。

示例代码：

// 获取iframe的window对象
const iframeWindow = document.querySelector('#targetIframe').contentWindow;

// 要执行的代码字符串
const code = `
  console.log('当前代码的window:', window);
  console.log('是否为iframe的window:', window === iframeWindow); // 输出true
`;

// 创建绑定了iframe window的执行函数
const runInIframeContext = new Function('window', code);

// 执行函数，传入iframe的window作为参数
runInIframeContext(iframeWindow);

// 外部代码仍使用原window
console.log('外部代码的window:', window); // 输出原window

这种方法的优势在于：

• 明确隔离执行上下文，不会污染全局环境
• 性能优于其他沙箱方式
• 符合现代JS编码规范，无兼容性风险

方法二：使用with语句（不推荐） #

通过with语句临时将作用域链指向iframe的window，让eval执行的代码优先从iframe窗口查找变量。但该方式存在性能问题、变量歧义风险，且严格模式下被禁用，仅作了解：

const iframeWindow = document.querySelector('#targetIframe').contentWindow;
const code = `console.log(window === iframeWindow);`;

with (iframeWindow) {
  eval(code);
}

注意事项 #

• 以上方法仅适用于同域iframe，跨域场景下受浏览器同源策略限制，无法访问iframe的contentWindow对象。
• 若执行的代码需要访问原window，可以在传入参数时额外添加原window的引用，例如：

  const runInIframeContext = new Function('window', 'originalWindow', `
    console.log('iframe window:', window);
    console.log('原window:', originalWindow);
  `);
  runInIframeContext(iframeWindow, window);
  

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