3

要素がクリックされ、JQuery post関数を使用してサーバーから画像が取得され、画像にサイズ変更された新しいウィンドウに表示されるWebページがあります。関連するJavascript関数は次のとおりです（myImageはbase 64形式で返される画像です）。

function showPicture(label) {
        var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
        $.post( 'picture-view', { labelname: label },
        function(myImage) {
            newWindow.document.write("<img src='data:image/png;base64," + myImage + "'/>");
            newWindow.resizeTo(newWindow.document.getElementsByTagName("img")[0].width,     newWindow.document.getElementsByTagName("img")[0].height+newWindow.outerHeight-newWindow.innerHeight);
            newWindow.focus(); 

        }
    );          
}

私に問題を引き起こしている3つのことがあります。

  1. 画像が新しいウィンドウに挿入され、白い境界線が表示されますが、削除方法がわかりません。

  2. この用語newWindow.outerHeight-newWindow.innerHeightは、ウィンドウのサイズを変更するときにツールバーなどを説明することになっていますが、両方ともゼロとして出力されています。

  3. この最後のものは本当に私を悩ませてきました。4行目から始まるコールバック関数内に行を配置するとvar newWindow = window.open("", label,"scrollbars=0, toolbar=0");、新しいウィンドウの作成が小さすぎて、resizeTo関数によってサイズが変更されません。

さらに読むためのアドバイスや指示は非常に役立ちます。

4

2 に答える 2

1

あなたはjQueryを使用しているので、このA LOTを単純化することができますが、すでにプレーンJSを多く使用しているので、私はそれを使い続けました。

新しいウィンドウを開く前に、画像が読み込まれるまで待つ必要があります。そうすれば、次のように画像と同じサイズに設定できます。

function showPicture(label) {
    $.post( 'picture-view', { labelname: label }, function(ImageSrc) {
       var myImage = new Image;
           myImage.src = "data:image/png;base64," + ImageSrc;
           myImage.style.border = 'none';
           myImage.style.outline = 'none';
           myImage.style.position = 'fixed';
           myImage.style.left = '0';
           myImage.style.top = '0';
           myImage.onload = function() {        
               var newWindow = window.open("", label,"scrollbars=0, toolbar=0, width="+myImage.width+", height="+myImage.height);
                   newWindow.document.write(myImage.outerHTML);
          }​
    });
}

これは、それがどのように行われるかを示すFIDDLEです。ある種の偽のAjax関数を作成する時間がなかったため、base64がファイルに追加されました。

于 2012-07-16T15:41:03.720 に答える
0

次の方法で、新しいウィンドウの画像を参照できます。

var img = $("img",newWindow.document)[0]; // Get my img elem

コードへの適応：

function showPicture(label) {
    var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
    $.post( 'picture-view', { labelname: label },
    function(myImage) {
        newWindow.document.write("<body marginheight='0' marginwidth='0'><img src='data:image/png;base64," + myImage + "'/></body>");
        var img = $("img",newWindow.document)[0];
        newWindow.resizeTo($(img).width(), $(img).height());
        alert($(img).width()+","+$(img).height()); //Just to check values
        newWindow.focus(); 
    });          
}

白い境界線は体の縁によるものだと思うので、追加しました

<body marginheight='0' marginwidth='0'>

の

newWindow.document.write

それらを削除します。

Firefoxでテストしましたが、動作しますが、画像全体が読み込まれる前にサイズ変更が行われるため、小さいウィンドウが開くことがあります。この場合、問題を回避するためにwindow.setTimeoutを追加できます。

于 2012-07-16T16:20:07.047 に答える