Implementing top and bottom horizontal scrollbar for an iframe

Question

I am implementing top and bottom horizontal scrollbar for an iframe .I am using an external site url to be displayed on the iframe.

I created one more div 'scrollbar' before main div containig iframe.On it's scroll event,I am changing the scroll position of iframe and vice verse.

This is my implementation.

If I give any url from the same domain ( something like localhost:8080/myProject/samplePage.html ), it works perfectly . But for external urls it doesn't work.

This error coming when I scroll top scrollbar.

Uncaught SecurityError: Blocked a frame with origin from accessing a frame with origin. Protocols, domains, and ports must match.

I am using code :

 var frame = document.getElementById('iframe1').contentWindow;
 scrollbar.onscroll= function() {
                //changing the scroll positions of iframe
                var posLeft = scrollbar.scrollLeft;
                frame.scrollTo(posLeft,frame.document.body.scrollTop);
            };
  frame.onscroll= function() {
                //changing the scroll positions of top scroll
                var posLeft = frame.document.body.scrollLeft;
                scrollbar.scrollLeft = posLeft;
            };

Answer 1

This error is caused by a security measure that prevents cross-side scripting and it is called the same-origin policy. Although the W3C is working on a standard for Cross-Origin Resource Sharing, this probably won't help you, because the site in your iframe would have to cooperate with you to implement this, which is the case for most work-arounds for this problem.

One work-around that you could try however is changing the document.domain property, so that the domain of the site in your iframe and your site match.