1

ページ (残り) に表示する動的リンクは、応答で 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 を使用しています。

ありがとう

4

1 に答える 1

0

これは、リンクが何を返すか (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);
        }
    });
}
于 2012-11-20T10:12:26.900 に答える