javascript - 如何访问 iframe 并使用 jQuery 影响它

Question

我正在尝试将嵌入到文档中的 iframe 向下滑动。 iframe 包含另一个网站。到目前为止，我已经看过这个线程:

Can we do fade in and fade out in iframes

但是增加不透明度的技术不适用于幻灯片动画并且它没有解决更改 iframe 的 css 的问题。到目前为止，这是我的代码(iframe 的 id 是“sketchpad”):

var skpad = document.getElementById('sketchpad').contentDocument;
    var skpad$ = $(skpad);
    $('.sketchBtn').bind('click',
        function() {
            alert(skpad$);
            skpad$.slideDown(300);
        }
    );

我也试过这个:

skpad$.css({
            display:'block'
            })
            .animate({
            opacity:'1.0',              
            },300);

底部不是向下滑动，但我只是想看看它是否可行。它没有。有什么想法吗？

Answer 1

如果您希望跨域，只有您可以控制 iframe 的 SRC 上的内容才有可能。但是，我猜，如果你能控制 iframe 的 SRC 的内容，你就会编写 slideDown代码在那里，你不会吗？

Javascript 有一个 Same-Origin如果不共享 Same-Origin，则外部页面上的 javascript 无法访问 iframe 页面的 contentWindow 或 DOM(或全局状态)的策略.在这种情况下，同源意味着主机+域匹配，例如 www.domain.com 不同于 static.domain.com。同源也意味着协议(protocol)匹配。

如果您碰巧控制了 iframe 的内容，您可以简单地添加 slideDown在 DOM Ready 上添加它。如果你想变得非常花哨，你可以实现 window.postMessage向子 Iframe 发出何时向下滚动的信号，但这可能有点矫枉过正。

最好的办法是搞乱 <iframe> 的动画标记自身并单独保留内部内容。也许有一条轨道你可以做 <div>与父页面背景相同的颜色向下滚动到 <iframe> 顶部有效模拟向下滚动？