如何让嵌入HTML的Plotly图表强制全屏显示？

一、新标签页打开全屏图表 #

Plotly导出的HTML文件本身支持自适应布局，直接在独立标签页打开就能占满窗口，可通过以下两种方式实现：

方式1：添加全屏跳转按钮 #

在iframe旁新增按钮，点击后打开独立的图表页面：

<iframe width="100%" height="500" src="fig3_small.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<button onclick="window.open('fig3_small.html', '_blank', 'fullscreen=yes')">打开全屏图表</button>

方式2：iframe可点击跳转全屏 #

给iframe套一层链接，点击图表区域即可打开全屏页面：

<a href="fig3_small.html" target="_blank" style="display:block; width:100%; height:500px;">
  <iframe width="100%" height="100%" src="fig3_small.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</a>

二、弹窗形式全屏显示 #

用JavaScript创建弹窗加载图表，并调用浏览器全屏API强制占满屏幕：

<iframe width="100%" height="500" src="fig3_small.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<button onclick="openFullscreenChart()">弹窗打开全屏图表</button>

<script>
function openFullscreenChart() {
  // 创建适配屏幕尺寸的弹窗
  const chartWindow = window.open('fig3_small.html', 'chartFullscreen', 
    `width=${screen.width},height=${screen.height},top=0,left=0`);
  // 页面加载完成后触发全屏（需用户交互触发，避免浏览器拦截）
  chartWindow.onload = function() {
    const elem = chartWindow.document.documentElement;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  };
}
</script>

补充：R导出时的优化 #

用R导出Plotly图表时，确保导出的HTML是自包含的响应式文件，代码示例：

library(plotly)
library(htmlwidgets)

# 生成你的Plotly图表
fig <- plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length, type = "scatter")

# 导出为自包含的HTML文件
saveWidget(fig, "fig3_small.html", selfcontained = TRUE)

导出的文件本身会自适应窗口大小，在独立页面打开时无需额外设置即可全屏展示。

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