Question

我的情况：

我有2个网站：

      website 1
    ____________
   |            |
   |  website 2 | --- loading inside iframe
   |____________|

注意：使用不同的域名

作业：在网站1中，我有一个类似的数组：

var scrollTopPoints = [100, 900, 500, 300, 630];

我想在<iframe>中为数组中的点设置动画（因此网站2将被修改）。

我收到的错误讯息：

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://domain1.com" from accessing a frame with origin "http://domain2.com". Protocols, domains, and ports must match.

我尝试使用postMessage()解决问题，例如this SO post。

但我仍然无法修改scrollTop的{{1}}。

一些测试代码（可能不相关）

网站1（包括iframe）：

<iframe>

网站2：

<script src="/jquery-1.11.3.min.js"></script>
<script>
    $(document).ready(function() {
        $('iframe').on('scroll', function() {
            console.log('scrolled.');
        });

        function receiveMessage(event)
        {
            console.log(event.data);
        }

        addEventListener("message", receiveMessage, false);

        $("iframe").contents().children().animate({ scrollTop: 100 }, 100);
    });
</script>

请注意，我将其用作测试代码。我现在看到了：

我发布了错误的方式（网站2 ---＆gt;网站1）
此处未定义数组的部分。

另一个编辑：主要问题是如何使用postmessage通信为iframe设置动画，因为当它有另一个域时，我无法直接访问iframe内容。

上次修改：问题已解决

我以错误的方式使用postmessage。对此问题的其他访问者有效的代码：

网站1（家长）

<div style="height:300px;background:#333;"></div>
<div style="height:300px;background:#555;"></div>
<div style="height:300px;background:#777;"></div>
<div style="height:300px;background:#999;"></div>
<script src="jquery.min.js"></script>
<script>
    $(window).on('scroll', function() {
        parent.postMessage("This is a message", "*");
    });
</script>

网站2（儿童）

<iframe id="frame" src="http://localhost/postmessage_test/" frameborder="0"></iframe>

<script src="/jquery-1.11.3.min.js"></script>
<script>
    $(document).ready(function() {
        var scrollPoint = 100;

        var targetFrame = $('#frame')[0];
        targetFrame.onload = function() {
            targetFrame.contentWindow.postMessage(scrollPoint, '*');
        };
    });
</script>

感谢您提供与我的帖子相关的所有帮助。

在iframe里面的JavaScript滚动网站

0 个答案: