<iFrame> synchronized scrolling

[elppa]

Is there anyway to get two iFrames on a page to scroll in sync?

Both of these <iframes> are displaying content from different servers to the one the page is running on.

Have tried this, works in Safari, sadly firefox won't allow permission to set the onscroll property.

window.onload = function() {
           var frame1Document = document.getElementById('myIframe1').contentDocument;
           var frame2Document = document.getElementById('myIframe2').contentDocument;
           
           frame1Document.onscroll = function() {
               //console.log("scroll from frame 1");
               syncScroll(frame1Document, frame2Document);
           }
           
           frame2Document.onscroll = function() {
               //console.log("scroll from frame 2");
               syncScroll(frame2Document, frame1Document);
           }
           
           
           function syncScroll(controllerDocument, targetDocument) {
               targetDocument.body.scrollTop = controllerDocument.body.scrollTop;
               targetDocument.body.scrollLeft = controllerDocument.body.scrollLeft;
           }
        }

I have exhausted usual channels, if anyone has any other ideas it would be much appreciated.

 

[angelwatt]

From what I'm reading, Firefox does support the onscroll event. For the two lines near the top of the code you have,

var frame1Document = document.getElementById('myIframe1').contentDocument;
var frame2Document = document.getElementById('myIframe2').contentDocument;

Instead, try,

var frame1Document = document.getElementById('myIframe1');
var frame2Document = document.getElementById('myIframe2');