Question

如何滚动父窗口和滚动iframe。我的意思是说如果有人滚动iframe它也应滚动父窗口。我想通过javascript实现这一目标。起源是一样的。

Answer 1

由于您的两个文档共享相同的来源，因此您不受同一原始政策的限制，这意味着您可以从一个文档中的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方法到另一个文档，它应该足够简单，可以在一个文档中捕获滚动事件，然后让另一个知道滚动增量。

用父窗口滚动iframe

1 个答案: