使用父窗口滾動iframe

如何滾動父窗口並滾動iframe。我的意思是說如果有人滾動iframe，它也應該滾動父窗口。我想通過JavaScript實現這一點。起源是一樣的。使用父窗口滾動iframe

2016-09-04 prem

父文檔和iframe是否共享相同的來源？ –

@Nitzan是同一起源 – prem

由於您的兩個文檔共享相同的來源，因此您不受同一來源策略的限制，這意味着您可以從一個文檔中的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方法從一個文檔到其他，它應該很簡單，可以捕捉滾動事件在一個，然後讓其他人知道滾動三角洲。

來源

2016-09-04 13:40:55

謝謝，但我真的很新的JavaScript可以提供滾動的例子。 – prem

這個網站不是讓人們爲你寫代碼的地方。在嘗試自己做事情之後，你應該問問題，但還沒有弄清楚。然後，當你問一個問題時，你應該包括你迄今爲止嘗試過的以及它失敗的方式。你還期望學習js嗎？你應該從這裏開始：https：//developer.mozilla.org/en-US/docs/Web/Events/scroll –

感謝Nitzan，感謝！ – prem

使用父窗口滾動iframe

回答

相關問題