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不同。同源也意味着协议匹配。

如果您碰巧控制了iframe的内容，您只需在DOM Ready上添加slideDown即可。如果你想真正想要的话，你可以实现window.postMessage来向孩子发送iframe信号，以便向下滚动，但这可能只是过度杀伤。

你最好的选择是混淆动画<iframe>标签本身并留下内在内容。也许有一条轨道可以做到，<div>与父页面背景相同的颜色向下滚动到<iframe>的顶部，有效地模拟了scrollDown？

如何访问iframe并使用jQuery对其进行影响

1 个答案: