如何制作一个新按钮来开始嵌入 Google 幻灯片演示？

Question

我在我的网站的 iframe 中嵌入了一个 Google 幻灯片演示文稿。我想创建一个单独的按钮（大且可见）来启动它。

我在 Chrome 控制台中尝试了运行 $(".goog-flat-button[title='Play']").click(); - 没有效果。我定位的是错误的元素，还是这在 iframe 中不起作用（为什么不呢？），还是我做错了什么？

Answer 1

解决方案

如果你仔细观察，播放按钮不会直接监听点击事件：

它确实监听不同的鼠标事件。使用此 snippet 您可以成功模拟鼠标在单击按钮时的行为并最终触发所需的行为。

var targetNode = document.querySelector (".goog-flat-button[title='Play']");
if (targetNode) {
    //--- Simulate a natural mouse-click sequence.
    triggerMouseEvent (targetNode, "mouseover");
    triggerMouseEvent (targetNode, "mousedown");
    triggerMouseEvent (targetNode, "mouseup");
    triggerMouseEvent (targetNode, "click");
}
else
    console.error ("*** Target node not found!");

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

如何制作一个新按钮来开始嵌入 Google 幻灯片演示？

How to make a new button to start embedded Google Slides presentation?

javascript

jquery

google-slides

解决方案