1

画像を含むポップアップウィンドウを作成しようとしていますが、ポップアップを画像と同じアスペクト比にします。しかし、私はimage.onloadの画像の寸法しか知りません。したがって、必要なのは、image.onloadの後に表示されるポップアップです。しかし、ブラウザはそれを不要なポップアップと見なし、ブロックします。ユーザーがクリックした後の唯一のポップアップであっても。

最初にポップアップを作成し、後でコンテンツとサイズを変更しようとしましたが、それが機能した場合でも、ポップアップウィンドウが背景に隠れて、再び前面に戻す方法がない場合があります（ウィンドウのクロム）

遅延したポップアップがまだhookedユーザーのクリックに合っていることを確認する方法はありますか？または他のいくつかの提案。

動作させたいコード：



    selectURL: function(url) {
        // Check for images, otherwise just simply open the file by the browser.
        if(url.match(/(jpe?g|png|gif|bmp)$/gim)) {
            // Check if colorbox exists and use if so.
            if($.colorbox) {
                $.colorbox({
                    maxWidth:'80%',
                    maxHeight:'80%',
                    fixed: true,
                    scrolling: false,
                    href: url,
                    open: true,
                    photo: true
                });
            } else {
                // New image object so we can calculate the required popup size on load
                var myImage = new Image();
                myImage.src = url;
                // Close current window to make sure focus works
                if(typeof(popupWindow) !== 'undefined') {
                    popupWindow.close();
                }
                // Temporary loading image
                popupWindow = window.open('/images/loading.gif','popupWindow','height=400,width=600,resizable=no,scrollbars=no,top=200,left=200');
                if (window.focus) {
                    popupWindow.focus();
                }
                // Calculator and actual image opener :)
                myImage.onload = function() {
                    var maxWidth  = 600,
                        maxHeight = 600;
                    // Close existing popup
                    if(typeof(popupWindow) !== 'undefined') {
                        popupWindow.close();
                    }

                    if(this.width < maxWidth && this.height < maxHeight) {
                        popupWindow = window.open(this.src,'popupWindow','height='+this.height+',width='+this.width+',resizable=no,scrollbars=no,top=200,left=200');
                    } else if(this.width === this.height) {
                        popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200');
                    } else if(this.width < this.height) {
                        popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+(maxHeight / this.height * this.width)+',resizable=yes,scrollbars=yes,top=200,left=200');
                    } else {
                        popupWindow = window.open(this.src,'popupWindow','height='+(maxWidth / this.width * this.height)+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200');
                    }
                    if (window.focus) {
                        popupWindow.focus();
                    }
                }
            }
        } else {
            window.open(url);
        }
    }
4

1 に答える 1

1

を含むポップアップ ウィンドウが表示されている場合loading.gif は、 1 回のクリックで2 つのポップアップを開くことをブラウザが好まない可能性があります。

show-image.htmlターゲット画像のサイズを計算しながら読み込み中の画像を表示できるポップアップを開いてwindow.resizeTo()、寸法がわかったらウィンドウのサイズを変更してみてください。

またはshow-image.htmlなどの URL 変数を使用して、ターゲット イメージのファイル名を指定することをお勧めします。このような方法を使用する場合は、XSS を回避するために、URL から収集した変数から必要な文字をエスケープする必要があることに注意してください。show-image.html?image=foo.barshow-image.html?foo.bar

jsFiddle を使用して例を作成しました。このページは、純粋にテスト目的で、URL 変数を介して画像の URL を受け入れます。独自の実装では、これを (このページに) 含めないでください。また、当然のことながら、XSS やnullチェックからの保護を含めていないことにも注意してください。

これは、1920 x 1080 のターゲット イメージを使用したページへのリンクです。
これは、800 x 600 のターゲット イメージを使用したページへのリンクです。

画像の真の再ロードを確認するには、ブラウザのキャッシュをクリアして、画像を再度ロードする必要があることに注意してください。

上記ページのソースはこちら。このデモを微調整したい場合は、ローカル ドキュメントに保存することをお勧めします。jsFiddle のフレームは位置の計算に失敗する可能性があるためです。

上記のページは、私が作成した 2 番目のページを含むポップアップを作成する手段を提供します。URL を介して 2 番目のページに画像の場所を渡します。前述のように、2 ページ目では、指定された画像名が Web サイトの外に出ないようにすることをお勧めします (この例では、これらのチェックは意図的に省略されています)。

最初のページがポップアップを作成しているページのソースは次のとおりです。

さらに説明や例が必要な場合は、お知らせください。

于 2012-07-20T11:30:54.797 に答える