Question

我的Google文档查看器存在问题导致噩梦得以解决，因为它只会间歇性地发生。我正在寻找有关如何在每次iframe加载中制作内容的指导，而不会出现问题。

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

http://bit.ly/1mqbuf7

2）当您加载页面时，pdf文档将在60％的时间内加载到iframe中。

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

我很难理解为什么它只会在某些时候没有明显的错误。这已在Google Chrome v 48.0.2564.103（PC）和Internet Explorer Edge v25.10586（PC）上经过测试并失败，但结果和失败频率相同。

非常感谢任何指导。

Answer 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。嵌入对象的行为与google doc查看器相同，它在100％的情况下工作（没有失败的加载），但由于IE和/或低端移动设备不支持它，请使用google doc viewer那......我猜是渐进增强。

Answer 2

这是一个“ hack”，可以确保每次都正确加载（尽管会有所延迟，由于可能的失败尝试-这是Google的错，请不要开枪！）。可以修改2s间隔时间，以最适合成功加载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);
});

Answer 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.

Google文档查看器偶尔无法在iframe中加载内容

3 个答案: