如何同时滚动父窗口和滚动iframe。我的意思是说,如果有人滚动iframe,它也应该滚动父窗口。我正在考虑通过javascript实现此目的。起源是相同的。

最佳答案

由于两个文档共享相同的原点,因此您不受相同的原点策略的限制,这意味着您可以从一个文档中的javascript调用另一文档中的javascript。

一个简单的例子:

父级index.html

<html>
    <head>
        <script>
            function handleMessage(msg) {
                console.log("message from iframe: ", msg);
            }

            function sendMessage() {
                let msg = {
                    value: document.getElementById("message").value
                }

                document.getElementById("iframe").contentWindow.handleMessage(msg);
            }
        </script>
    </head>
    <body>
        <input type="text" id="message" />
        <button onclick="sendMessage()">send message to parent</button>
        <br/><br/>
        <iframe id="iframe" src="iframe.html"></iframe>
    </body>
</html>


iframe.html

<html>
    <head>
        <script>
            function handleMessage(msg) {
                console.log("message from parent: ", msg);
            }

            function sendMessage() {
                let msg = {
                    value: document.getElementById("message").value
                }

                parent.handleMessage(msg);
            }
        </script>
    </head>
    <body>
        <input type="text" id="message" />
        <button onclick="sendMessage()">send message to parent</button>
    </body>
</html>


既然您知道如何从一个文档调用js方法到另一个文档,那么它应该足够简单,以捕获一个文档中的滚动事件,然后让另一个文档知道滚动增量。

09-10 12:18
查看更多