如何让Plotly.js在新浏览器窗口的div中显示交互式图表？

问题原因 #

Plotly.js的newPlot方法默认在当前窗口的document上下文中查找元素ID，而新窗口的DOM属于独立的document环境，直接用ID字符串调用会找不到对应元素，触发"No DOM element with id exists"错误。

解决方案 #

核心思路是直接传入新窗口的DOM元素对象给Plotly，而非依赖ID查找，同时确保新窗口能访问Plotly.js：

步骤1：正确创建新窗口的DOM元素 #

必须使用新窗口的document对象创建元素，确保元素属于新窗口的DOM树：

const newwindow = window.open('', '', "top=0,left=0,width=800,height=800");
const div2 = newwindow.document.createElement('div');
div2.id = 'div2';
newwindow.document.body.appendChild(div2);

步骤2：直接传入DOM元素给Plotly.newPlot #

跳过ID查找，直接把新窗口的div元素作为第一个参数传入，这样Plotly无需跨上下文查找：

// 确保data和layout已定义
Plotly.newPlot(div2, data, layout);

步骤3：确保新窗口加载Plotly.js #

如果新窗口是空白页面（未引入Plotly），需要先在新窗口中加载Plotly脚本，否则会提示Plotly is not defined：

// 在新窗口中注入Plotly脚本
const script = newwindow.document.createElement('script');
script.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js'; // 替换为你使用的Plotly版本
script.onload = function() {
  // 脚本加载完成后再渲染图表
  Plotly.newPlot(div2, data, layout);
};
newwindow.document.body.appendChild(script);

完整修正代码 #

// 当前窗口创建div1并渲染（原逻辑补全）
const div1 = document.createElement('div');
div1.id = 'div1';
document.body.appendChild(div1); // 原代码未添加到文档，补充后才能正常渲染

// 新窗口处理逻辑
const newwindow = window.open('', '', "top=0,left=0,width=800,height=800");
const div2 = newwindow.document.createElement('div');
div2.id = 'div2';
newwindow.document.body.appendChild(div2);

// 注入Plotly脚本到新窗口
const script = newwindow.document.createElement('script');
script.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js';
script.onload = function() {
  // 假设data和layout已提前定义
  Plotly.newPlot(div1, data, layout); // 当前窗口正常渲染
  Plotly.newPlot(div2, data, layout); // 新窗口渲染成功
};
newwindow.document.body.appendChild(script);

关键说明 #

• 直接传递DOM元素而非ID，避免跨document上下文的查找问题；
• 新窗口是独立的执行环境，必须确保Plotly脚本已加载，否则无法调用Plotly方法；
• 原代码中div1未添加到当前文档的body，补充document.body.appendChild(div1)才能正常渲染。

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