R语言Xaringan HTML演示中嵌入的iframe如何启用全屏功能

整个实现基于浏览器原生Fullscreen API，不需要引入第三方依赖，直接在Rmd文件里添加对应代码即可，支持多iframe复用。

步骤1：调整iframe嵌入结构 #

不要直接写裸iframe标签，给每个需要全屏功能的iframe套一层专属容器，同时在容器内放置全屏切换按钮，记得给iframe加上allowfullscreen属性避免浏览器拦截全屏请求，示例代码如下：

<div class="iframe-wrapper">
  <button class="fullscreen-btn" title="切换全屏">⛶</button>
  <iframe src="https://embed.polleverywhere.com/multiple_choice_polls/XXX" width="100%" height="100%" frameBorder="0" allowfullscreen></iframe>
</div>

如果有多个iframe，每个都按这个结构写即可。

步骤2：添加自定义样式 #

把下面的CSS代码添加到Xaringan幻灯片的自定义样式块中（可以直接放在Rmd文件开头的<style>标签里，也可以写入独立css文件后在yaml头中引用），用来控制容器、按钮的布局，以及全屏状态下的显示效果：

/* iframe容器默认样式 */
.iframe-wrapper {
  position: relative;
  width: 100%;
  height: 480px; /* 可根据幻灯片布局自行调整非全屏状态下的iframe高度 */
}
.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* 全屏切换按钮样式 */
.fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* 全屏状态下容器撑满视口 */
.iframe-wrapper:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #fff;
}
.iframe-wrapper:fullscreen iframe {
  width: 100%;
  height: 100%;
}
/* 兼容Webkit内核浏览器 */
.iframe-wrapper:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #fff;
}

步骤3：添加交互逻辑 #

把下面的JS代码放在Rmd文件末尾的<script>标签中即可，实现点击按钮切换全屏/退出全屏的逻辑，自动适配页面上所有加了对应类名的容器和按钮：

document.addEventListener('DOMContentLoaded', function() {
  const toggleBtns = document.querySelectorAll('.fullscreen-btn');
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetWrapper = this.parentElement;
      // 当前未进入全屏则请求对应容器全屏，否则退出全屏
      if (!document.fullscreenElement) {
        targetWrapper.requestFullscreen().catch(err => {
          alert(`全屏请求被拦截：${err.message}`);
        });
      } else {
        document.exitFullscreen();
      }
    })
  })
})

使用说明 #

• 嵌入的第三方页面（比如PollEverywhere的投票页）默认允许iframe全屏，不需要额外调整参数，按上述结构嵌入即可正常使用
• 除了点击按钮退出全屏，按键盘ESC键也可以按照浏览器原生逻辑退出全屏
• 如果需要调整按钮位置、样式，直接修改CSS中.fullscreen-btn的对应属性即可

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