Android端嵌入网站的Google Slides点击无法翻页的解决方案咨询

方案1：通过postMessage向嵌入的Google Slides发送翻页指令（推荐） #

Google Slides的iframe嵌入实例支持通过postMessage API接收控制指令，你可以自行开发两个尺寸更大的外部按钮实现翻页，具体实现步骤如下：

• 首先给嵌入的iframe添加id属性，方便后续DOM选取：

<iframe id="google-slides" src="https://docs.google.com/presentation/d/你的文档ID/embed" frameborder="0" width="960" height="569" allowfullscreen="true"></iframe>

• 添加上一页、下一页按钮的HTML代码，可自定义按钮尺寸、样式适配你的网站风格：

<button id="prev-btn" style="padding: 12px 24px; font-size: 18px; margin-right: 16px;">上一页</button>
<button id="next-btn" style="padding: 12px 24px; font-size: 18px;">下一页</button>

• 添加对应的JS控制逻辑：

const slidesIframe = document.getElementById('google-slides');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// 下一页逻辑
nextBtn.addEventListener('click', () => {
  slidesIframe.contentWindow.postMessage(JSON.stringify({
    method: 'next'
  }), '*');
});

// 上一页逻辑
prevBtn.addEventListener('click', () => {
  slidesIframe.contentWindow.postMessage(JSON.stringify({
    method: 'prev'
  }), '*');
});

• 如果你要恢复点击幻灯片区域直接翻页的交互，还可以给iframe外层包裹的容器添加点击事件，根据点击位置判断翻页方向（比如左半屏点击跳上一页，右半屏点击跳下一页），适配原有使用习惯。

方案2：调整嵌入参数简化界面 #

你可以在嵌入链接的末尾追加&rm=minimal参数，隐藏底部默认的导航栏、工具栏，再搭配方案1的自定义按钮使用，界面更简洁，也不会出现小按钮误触的问题。

方案3：移动端触摸手势适配 #

如果你的使用场景以移动端为主，还可以额外添加滑动手势支持，监听iframe外层容器的touchstart、touchend事件，判断用户左右滑动的动作触发对应翻页逻辑，进一步提升移动端操作体验。

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