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

Question

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

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

这是我的实现。

如果我提供来自同一域的任何网址（例如 localhost:8080/myProject/samplePage.html ），它就可以完美运行。但是对于外部网址，它不起作用。

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

Uncaught SecurityError: Blocked a frame with origin from access 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 中的网站域与您的网站匹配。