在加载后续内容时隐藏iframe

Question

所以我使用jQuery更改iframe（同一服务器）内的内容，基本上将所有彩色元素更改为灰度。网站中的原始内容是彩色的，我想提供该网站的灰度版本。

我现在有一些代码可以防止原始彩色iframe内容在首次加载时短暂显示。我首先将iframe设置为隐藏...

#frame{
    visibility:hidden;
}

在完成所有更改后取消隐藏iframe：

$('#frame').load(function(){
   ... various changes to css....
   $('frame').css('visiblity','');
});

这样在加载或重新加载页面时就可以了。

iframe中导航时出现问题。如果用户点击iframe中的某些链接，它会跳转到另一个页面，并且短暂的时间，我会再次看到颜色（直到执行.load中的css更改）。如何让它更加无缝？

编辑：我想补充一点，我不想触及内容的代码。

Answer 1

所以我最终的解决方案是简单地为a中的所有iframe元素分配一个点击监听器。

$('#frame').contents().find('a').click(function(){
    $('#frame').css('visibility','hidden')
});

在内部启动点击时暂时隐藏iframe，并在原始问题中发布的代码中显示。