如何显示图像 (img) 或 pdf (iframe)

Question

我在页面（休息）上显示的动态链接可能会导致响应中出现 jpeg、tif 或 pdf 文件。

我尝试这样做（图像部分工作正常）：

fetchContent(uri){
    $.ajax({ 
        type: "GET",            
        url: uri,
        success: function(output, status, xhr) {
            var contentType = xhr.getResponseHeader("Content-Type");
            if(contentType === "image/jpeg" || contentType === "image/tiff"){
                // IMG: get parent div 'container'
                var $container = $('#container', top.frames["content"].document);
                var img = new Image();
                $(img)
                    .load(function(){
                        // initially hide
                        $(this).hide();
                        $(this).attr('id', 'imgId');
                        // parent div:
                        $container
                            // remove previous image
                            .empty()
                            // add this image
                            .append(this);
                        // fade in image effect
                        $(this).fadeIn();
                    })
                    // set the src attribute of the new image to our image
                    .attr('src', uri);
            }else if(contentType === "application/pdf"){
                // PDF: get parent div 'main'
                var $main = $('#main', top.frames["content"].document);
                $main.empty();
                $main.append("<iframe id='contentIFrame' name='contentIFrame' src='" + uri +
                "' width='100%' style='height:100%'></iframe>");
            }
        },
        complete: function(output){
            $('#navigation-block').append(output);
        },
        error: function(output) {
            $('#navigation-block').append(output);
        }
    });
}

PDF 部分不起作用。

我该如何解决？

顺便说一句，我控制 REST 服务器端和 jQuery 端，所以我在 REST 响应标头中添加了正确的内容类型。

我签出了PDF.js本来会使用它，但我的客户不幸使用IE8。

谢谢

Answer 1

这是事先不知道链接将返回什么（jpeg，tif或pdf）问题的最终解决方案：

function fetchImage(uri, $activeLink){
    // show loader div
    var $loadingStatus = $('#loadingStatus', top.frames["content"].document);
    $loadingStatus.fadeIn();
    // remember (select) the link that has just been activated
    $("#navigation-block>ul>li>a.zactive").removeClass("zactive");
    $($activeLink).addClass('zactive');

    $.ajax({
        type: "GET",            
        url: uri,
        success: function(output, status, xhr) {
            // for images use main parent div 'main-img'
            var $mainImg = $('#main-img', top.frames["content"].document);
            // for pdf use parent div 'main-pdf'
            var $mainPdf = $('#main-pdf', top.frames["content"].document);
            // REST service will always return correct content-type
            var contentType = xhr.getResponseHeader("Content-Type");
            if(contentType === "image/jpeg" || contentType === "image/tiff"){
                // for images we also need child div 'container'
                var $container = $('#container', top.frames["content"].document);
                var img = new Image();
                $(img)
                    .load(function(){
                        // default: hide image
                        $(this).hide();
                        $(this).attr('id', 'imgId');
                        // img parent div:
                        $container
                            // remove previous img 
                            .empty() 
                            // insert this img 
                            .append(this); 
                        // hide pdf div and show img div
                        $($mainPdf).hide();
                        $($mainImg).show();
                        // fade in image 
                        $(this).fadeIn();
                        // remove loader div
                        $loadingStatus.stop(true, true).fadeOut();
                    })
                    // set the src attribute of the new image to this uri
                    .attr('src', uri);
            }else if(contentType === "application/pdf"){
                $mainPdf.empty(); // so I don't have to check whether iframe is already there
                $mainPdf.append("<iframe id='contentIFrame' name='contentIFrame' src='" + uri +
                "' width='100%' style='height:100%'></iframe>");
                // hide img div and show pdf div
                $($mainImg).hide();
                $($mainPdf).show();
            }
        },
        error: function(output) {
            alert("error " + output);
        }
    });
}