jquery 滚动到 Google 网站上嵌入 iframe 的顶部时出现问题

Question

我查找了这个解决方案，当用户单击“下一步”时，具有多个部分的嵌入式表单滚动到顶部。我无法让它工作，我可以跨域复制我的错误。我已经建立了一个公开测试表格的网站。如果有人知道我做错了什么，我很想知道。提前致谢。我希望这是愚蠢的事情。

我在 Macintosh 上使用 Google Chrome，并且 Google 网站在 iframe 中托管此嵌入式表单。

https://sites.google.com/maclimore.com/test?usp=sharing

加载中… jQuery('iframe').load(function(){jQuery('html,'body').animate({scrollTop: 0}, '慢');});

Answer 1

您可以向 iframe 中注入一些代码，单击按钮后 iframe 会向父文档发送一条消息。然后您的网站将侦听此消息。事件发生后，它会触发相应 iFrame 中的滚动。请确保为您的 iFrame 提供一个可以使用的 ID。

这是我制作的一个例子：

jQuery(document).ready(function(){
    var iframe = document.getElementById('test-iframe');
    iframe.onload = function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.innerHTML = `
            document.querySelector('button-selector').addEventListener('click', function() {
                 window.parent.postMessage('scrollToTop', '*');
            });
        `;
        iframe.contentWindow.document.body.appendChild(script);
    };

    // Listen for messages from the iframe
    window.addEventListener('message', function(event) {
        if (event.data === 'scrollToTop') {
             var iframe = jQuery('#test-iframe').get(0);
             iframe.contentWindow.scrollTo(0, 0);
        }
    });
});