单击任何下载链接后，iframe中的Google文档将变为灰色

Question

我有一个页面（以下为人为的示例），其中包含Google文档和下载链接。 单击链接后，iframe变为灰色，并且根本不回来。 我将页面剥离了下来，所以只有这两个元素仍然存在。

这肯定在Firefox，Chrome和Safari中发生。

不包含Google文档的iframe似乎没有此问题。

有任何想法吗？

<html>
<head></head>
<body>
<iframe src="http://docs.google.com/document/d/1mCYGLa8-Qsz_nYdk_f_8YefqWKMyulwVl223rebRMqM/preview" width="660" height="648"></iframe>
<a class="download_link" href="http://fastdl.mongodb.org/osx/mongodb-osx-i386-2.0.6.tgz">Download</a>
</body>
</html>

Answer 1

有点讨厌的解决方案是在link标签上设置target='_blank' 。 这将在一个单独的窗口中打开请求，但是一旦将请求注册为下载，该窗口将关闭并使用户停留在原始页面上，而新的下载将在后台。

这似乎在Chrome和Firefox上运行良好，但是Safari在下载正在进行时离开了新窗口。

另一种解决方案是重新加载iframe设置，将其src属性设置为自身。 唯一的麻烦是用户将失去其滚动位置。

我选择了混合解决方案，但确实做出了一个大的假设，即所有版本的Chrome和Firefox都表现出相同的行为（下载开始时关闭选项卡）。 这可能是不正确的，因此应该完善浏览器的检测。

或者，嘿，谷歌可以修复谷歌文档:)

        // preserve the google doc in the iframe. else the iframe goes gray when a download link is clicked
        if (navigator.userAgent.indexOf('Chrome') != -1 || navigator.userAgent.indexOf('Firefox') != -1){
            // Chrome and Firefox open new tabs with target='_blank' but close them again when the download begins
            // the page itself is unaffected
            $('a.download_link').attr('target', '_blank');
        }
        else{
            // the above doesn't work on Safari and probably others so fall back to reloading the iframe contents
            $('a.download_link').live('click', function(){
                $('iframe').each(function(id, frame){
                    frame.src = frame.src;
                });
            });
        }