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

一个令人讨厌的解决方案是在链接标记上设置target='_blank'。这将在一个单独的窗口中打开请求，但是一旦请求被注册为下载，窗口将关闭，并将用户保留在原始页面上，并在后台下载新的下载。

这似乎在Chrome和Firefox上运行良好，但Safari会在下载过程中离开新窗口。

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

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

或者，嘿，Google可以修复Google文档：）

        // 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;
                });
            });
        }

点击任何下载链接时，iframe中的Google doc会变灰

1 个答案: