Google Docs Viewer有时无法在iframe中加载内容 [英] Google Docs Viewer occasionally failing to load content in iframe

问题描述

我在Google文档查看器中遇到了一个问题，该问题导致噩梦得以解决，因为它只会间歇性地发生.我正在寻找有关如何使iframe中的内容每次加载都没有问题的指南.

I'm having an issue with the Google Docs viewer that is causing a nightmare to solve because it only happens intermittently. I'm looking for guidance on how to make the content in the iframe load everytime without issue as it should.

复制步骤 1)该页面是一个基本的HTML页面，带有h1标签和一个iframe，其中包含指向同一服务器上PDF的链接

Steps to reproduce 1) This page is a basic HTML page with a h1 tag and an iframe containing a link to a PDF on the same server

http://bit.ly/1mqbuf7

2)加载页面时，pdf文档将在60％的时间内加载到iframe中.

2) When you load the page, the pdf document will load in the iframe 60% of the time.

3)如果您刷新10次左右，则刷新至少一次不会出现. Google首先返回307(工作时也会返回307)，然后返回204-无内容.工作正常后，它将返回200，其中包含您在查看器中看到的内容.

3) If you hit refresh 10 or so times, at least once it will fail to appear. Google returns a 307 first (Which it also does when it works) and then returns a 204 - no content. When it works, it returns a 200, with the content you see in the viewer.

我正在努力理解为什么它有时只执行此操作而没有可见错误.这已在Google Chrome v 48.0.2564.103(PC)和Internet Explorer Edge v25.10586(PC)上经过测试并失败，结果和失败频率相同.

I'm struggling to understand why it only does this some of the time with no visible errors. This has been tested and failed on Google Chrome v 48.0.2564.103 (PC) and Internet Explorer Edge v25.10586 (PC) with the same results and frequency of failure.

任何指导将不胜感激.

Any guidance would be greatly appreciated.

推荐答案

此处为"hack"；这样可以确保每次都能正确加载(尽管可能会由于尝试失败而有所延迟-这是Google的错，请不要开枪！).可以修改2s间隔时间，以最适合成功加载iFrame所需的时间.

Here's a "hack" that will ensure a proper loading every time (albeit with some delay, due to potential failed attempts - it's Google's fault, don't shoot the messenger!). The 2s interval duration can be modified to best fit the time expected for a successful effort to start loading the iFrame.

HTML:

<div id="test-id-1" style="text-align: center; width: 100%; height: 1150px" class="embed-pdf" data-url="{insert_pdf_link_here}"><span class="loader">Please wait...</span></div>

JS:

$(document).ready(function() {

    let embed_pdfs = {};

    $('.embed-pdf').each(function() {
        var $pdfViewer = $('<iframe src="https://docs.google.com/viewer?url=' + $(this).data('url') + '&embedded=true" style="width: 100%; height: 100%" frameborder="0" scrolling="no"></iframe>');
        $pdfViewer.appendTo($(this));
        console.log($(this).attr('id') + " created");
        embed_pdfs[$(this).attr('id')] = 'created';
    });

    $(document).find('.embed-pdf iframe').load(function(){
        embed_pdfs[$(this).parents('.embed-pdf').attr('id')] = 'loaded';
        $(this).siblings('.loader').remove();
        console.log($(this).parents('.embed-pdf').attr('id') + " loaded");
    });

    let embed_pdf_check = setInterval(function() {
        let remaining_embeds = 0;
        $.each(embed_pdfs, function(key, value) {
            try {
                if ($($('#' + key)).find('iframe').contents().find("body").contents().length == 0) {
                    remaining_embeds++;
                    console.log(key + " resetting");
                    $($('#' + key)).find('iframe').attr('src', src='https://docs.google.com/viewer?url=' + $('#' + key).data('url') + '&embedded=true');
                }
            }
            catch(err) {
                console.log(key + " reloading");
            }
        });
    
        if (!remaining_embeds) {
            clearInterval(embed_pdf_check);
        }
    }, 2000);
});

这篇关于Google Docs Viewer有时无法在iframe中加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！