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