如何显示图片（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);
        }
    });
}