Google Docs Viewer 偶尔无法在 iframe 中加载内容答案

【问题标题】：Google Docs Viewer occasionally failing to load content in iframeGoogle Docs Viewer 偶尔无法在 iframe 中加载内容
【发布时间】：2016-05-19 19:58:20
【问题描述】：

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

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

http://bit.ly/1mqbuf7

2) 当您加载页面时，pdf 文档将在 iframe 中加载 60% 的时间。

3) 如果你点击刷新 10 次左右，至少有一次它不会出现。谷歌首先返回 307（它在工作时也会这样做），然后返回 204 - 无内容。当它工作时，它会返回 200，其中包含您在查看器中看到的内容。

我很难理解为什么它只是在某些时候这样做而没有明显的错误。这已经在 Google Chrome v 48.0.2564.103 (PC) 和 Internet Explorer Edge v25.10586 (PC) 上进行了测试并且失败了，结果和失败频率相同。

任何指导将不胜感激。

【问题讨论】：

今天遇到了类似的问题。发布了一个新问题：stackoverflow.com/questions/40414039/…
对我来说同样的问题。难以置信的错误。尝试了一切都没有成功。

标签： html iframe google-docs

【解决方案1】：

这本身并不能解决您的问题，但是由于我遇到了同样的问题并且最终设法找到了可以接受的解决方案，所以我想我会分享它。

var $docViewer = $(`<iframe src="${newValue}" height="100%" width="100%"></iframe>`);
//If using modern browser, use and embed object
if (window.chrome || typeof (window.mozInnerScreenX) != "undefined")
  $docViewer = $(`<object width="100%" height="100%" data="${newValue}" type="application/pdf">
                    <embed src="${newValue}" type="application/pdf">
                        <p>This browser does not support PDFs.Please download the PDF to view it: <a href="${newValue}">Download PDF</a>.</p>
                    </embed>
                </object>`);
//Add the new viewer
$docViewer.appendTo($("#invoicePreview"));

基本上，如果是现代浏览器，则使用embed，如果不是，则使用 gviewer。嵌入对象的行为与谷歌文档查看器相同，它在 100% 的情况下都有效（没有失败的加载），但由于 IE 和/或低端移动设备不支持它，请使用谷歌文档查看器...我猜是渐进式增强。

【讨论】：

【解决方案2】：

这里有一个“hack”，可以确保每次都能正确加载（尽管由于潜在的尝试失败而有一些延迟 - 这是 Google 的错，不要射击信使！）。可以修改 2 秒的间隔持续时间，以最适合成功开始加载 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);
});

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="iframeContainer"></div>
</body>
<script>
    
    var URL = "https://docs.google.com/viewer?url=http://www.africau.edu/images/default/sample.pdf&embedded=true";
    var count = 0;
        var iframe = ` <iframe id = "myIframe" src = "${URL}" style = "width:100%; height:500px;"  frameborder = "0"></iframe>`;
            
       $(`#iframeContainer`).html(iframe);
            $('#myIframe').on('load', function(){ 
            count++;
            if(count>0){
                clearInterval(ref)
            }
        });

        var ref = setInterval(()=>{
        $(`#iframeContainer`).html(iframe);
        $('#myIframe').on('load', function() {
            count++;
            if (count > 0) {
                clearInterval(ref)
            }
        });
    }, 4000)
</script>
</html>

Change var URL = your_googel_docs_pdf_url

The code will keep loading the url into iframe until the doc loads successfully.

【讨论】：

您好，欢迎来到 stackoverflow，这里有一些指导原则：不建议发布纯代码答案，答案应提供有关代码的更多解释，使其成为答案更有用，更有可能吸引投票

【解决方案4】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="width:100%; height:100%;">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body id="iframeContainer" style="height: 100%; width: 100%; overflow: hidden; margin:0px;">
<script>
    
    var URL = "https://docs.google.com/gview?url=enteryoururl&embedded=true";
    var count = 0;
        var iframe = `<iframe id = "myIframe" src = "${URL}" style="width:100%; height:100%;" frameborder="0" allowfullscreen=""></iframe>`;
            
       $(`#iframeContainer`).html(iframe);
            $('#myIframe').on('load', function(){ 
            count++;
            if(count>0){
                clearInterval(ref)
            }
        });

        var ref = setInterval(()=>{
        $(`#iframeContainer`).html(iframe);
        $('#myIframe').on('load', function() {
            count++;
            if (count > 0) {
                clearInterval(ref)
            }
        });
    }, 2000)
</script>
</body>
</html>

上面的代码对我有用。

【讨论】：

您能否edit 回答您所做的更改以及为什么这可以解决问题？