为iframe实现顶部和底部水平滚动条

Question

我正在为iframe实现顶部和底部水平滚动条。我正在使用外部网站网址显示在iframe上。

我在主div包含div之前又创建了一个iframe'滚动条'。在它的滚动事件中，我正在更改iframe的滚动位置，反之亦然。

这是我的实施。

如果我从同一个域（类似localhost:8080/myProject/samplePage.html）提供任何网址，那么它的效果非常好。但对于外部网址，它不起作用。

滚动顶部滚动条时会出现此错误。

  

未捕获的SecurityError：阻止了一个原始访问a的帧   框架与原产地。协议，域和端口必须匹配。

我正在使用代码：

 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

此错误是由防止跨端脚本编写的安全措施引起的，它被称为the same-origin policy。虽然W3C正在使用standard for Cross-Origin Resource Sharing，但这可能无法帮助您，因为您的iframe中的网站必须与您合作才能实现此功能，对于此问题，大多数解决方法就是这种情况。

您可以尝试的一种解决方法是更改​​document.domain属性，以便iframe中的网站域与您的网站匹配。