使用父窗口滾動iframe

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 個解決方案

解決方案1
1 已采納 2016-09-04 13:40:55

使用父窗口滾動iframe

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-04 13:40:55

解決方案1
1 已采納 2016-09-04 13:40:55