自定义全屏切换按钮咨询：能否添加自定义按钮实现全屏切换及字段打开？

完全可以实现自定义全屏按钮，同时隐藏原生工具栏并挂载到指定位置，以下是具体实现步骤：

1. 隐藏标准工具栏 #

通过CSS直接隐藏原生工具栏（请根据实际页面结构调整选择器）：

.standard-toolbar {
  display: none !important;
}

2. 添加自定义按钮HTML #

在页面需要放置按钮的位置插入按钮元素：

<button id="custom-fullscreen-btn">切换全屏</button>

3. 编写全屏切换逻辑 #

利用原生JS的全屏API实现切换，同时关联字段显示/隐藏的控制：

const fullscreenBtn = document.getElementById('custom-fullscreen-btn');
// 可替换为特定容器元素，比如某个内容区域
const fullscreenTarget = document.documentElement;
// 替换为你需要控制显示的字段选择器
const targetFields = document.querySelectorAll('.toggle-display-field');

// 更新按钮文本和字段状态
function syncState() {
  const isFullscreen = !!document.fullscreenElement;
  fullscreenBtn.textContent = isFullscreen ? '退出全屏' : '切换全屏';
  // 全屏时显示字段，非全屏隐藏
  targetFields.forEach(field => {
    field.style.display = isFullscreen ? 'block' : 'none';
  });
}

// 绑定点击事件
fullscreenBtn.addEventListener('click', async () => {
  try {
    if (!document.fullscreenElement) {
      await fullscreenTarget.requestFullscreen();
    } else {
      await document.exitFullscreen();
    }
    syncState();
  } catch (err) {
    console.error('全屏切换失败:', err);
  }
});

// 监听系统触发的全屏状态变化（比如按ESC退出）
document.addEventListener('fullscreenchange', syncState);

// 初始化状态
syncState();

4. 自定义按钮样式（可选） #

给按钮添加样式适配页面布局，比如固定到右上角：

#custom-fullscreen-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #2563eb;
  color: #fff;
  cursor: pointer;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}

#custom-fullscreen-btn:hover {
  background-color: #1d4ed8;
}

注意事项 #

• 旧版浏览器可能需要添加API前缀（如webkitRequestFullscreen），如需兼容可自行补充前缀判断；
• 若目标是iframe内元素，需给iframe添加allowfullscreen属性；
• 字段选择器.toggle-display-field需替换为实际业务中对应的字段类名或ID。

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