如何同步2 iframe的滚动条 [英] How to sync the scroll bar for 2 iframe

问题描述

我有一个任务要在单个html页面中启动2个网页并并排进行网页比较，因此我为每个比较的网​​页都创建了2个iframe，但是在滚动条行为同步方面存在问题，就像我在左侧网页(iframe1)上移动垂直滚动条时一样，右侧网页(iframe2)上的滚动条也会移动. 有谁知道该怎么做?或使用iframe的其他方法，但可以启动2个网页并同步滚动条? 谢谢.

I have a task to launch 2 web pages in a single html page and do the web page comparsion side by side, so I have create 2 iframes for each comparing web page, however I have a problem on sync the scroll bar behaviour, like when I move the vertical scroll bar on the left side web page(iframe1), then the scroll bar on right side web page(iframe2) will move as well. Is there anyone know how to do it? or other method beside using iframe, but available to launch 2 web pages and sync the scroll bar? Thanx.

推荐答案

您可以使用contentWindow属性访问iframe的窗口.

You can access the iframe's window using the contentWindow attribute.

注册一个滚动处理程序contentWindow.onscroll，然后可以使用scrollTo滚动.

Register a scroll handler, contentWindow.onscroll, and you can scroll using scrollTo.

安全性说明:iframe的内容应与顶级页面来自同一域，因为它阻止跨域Javascript访问，才能访问contentWindow的值.

Security note: the content of the iframe's should be from the same domain as the top-level page, before it can access contentWindow's values, because cross-domain Javascript access is blocked.

frame1.contentWindow.onscroll = function(e) {
   frame2.contentWindow.scrollTop = frame1.contentWindow.scrollTop;
   frame2.contentWindow.scrollLeft = frame1.contentWindow.scrollLeft;
};

这篇关于如何同步2 iframe的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！