使用父窗口滚动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

回答

相关问题