0

フローティング ウィンドウ内に動的コンテンツを表示するために、SimpleModal プラグインを使用しています。このフローティング ウィンドウには、(クリック イベントで) Javascript 関数呼び出しが含まれており、このフローティング ウィンドウの一部のコンテンツが変更されています。

これはFFで非常にうまく機能します。しかし、IE には問題があります (私は IE8 のみでテストしました): このモーダル ウィンドウが対応するページで初めて開かれ、この Javascript 内からコンテンツ (または DIV を非表示にするなどのその他の効果) が変更されたときのみです。 jQueryを使用した機能が動作しています。その後の呼び出しで、このフローティング ウィンドウが途中で閉じられていた場合、IE は何もしません!!!

IE は、一部の DOM オブジェクトが変更されたこと、およびこれらの変更をレンダリングする必要があることを認識していないようです。DOM オブジェクトの実際のコンテンツを確認すると、コンテンツが変更されていることがわかりますが、レンダリングされていません! :-(

ルート要素で addClass('fake') / removeClass('fake') などのハックをすでに試しましたが、成功しませんでした。

ここにいくつかのテストコードがあります。

モーダル ウィンドウを開くための Javascript 関数:

showTestModal('DEBUG', '<div id="DivTestRoot"><div id="DivTest">OrigValue</div><a href="javascript:changeContent(\'\',\'\');"">Click here</a></div>', 100, true, 50, 50);

コンテンツを変更する Javascript 関数 (フローティング ウィンドウ内から呼び出される):

function changeContent() {
    $('#DivTest').html('ChangedValue');
    $('#DivTestRoot').addClass('fake');
    $('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot').show();
    alert($('#DivTest').parent()[0].innerHTML);

}

jQuery SimpleModal プラグインを呼び出すための対応するコード:

function showTestModal(title, data, height, showClose, top, left) {
if (title == undefined)
    title = "";
if (data == undefined)
    data = "";
if (height != undefined)
    TestModal.height = height;
if (top == undefined)
    top = 135;
if (left == undefined)
    left = 20;
var closeHTML = "";
if (showClose == undefined || showClose == true)
    closeHTML = "<a href='#' title='Close' class='modalCloseX'>x</a>";
var htmlModal = "<div id='DivTestModal' style='display:none'><div class='TestModal-top'></div><div class='TestModal-content'><h1 class='TestModal-title'>"
    + title + "</h1><div class='TestModal-loading' style='display:none'></div><div class='TestModal-errormessage' style='display:none'></div>"
    + "<div class='TestModal-message'>" + data + "</div></div><div class='TestModal-bottom'></div></div>";
$(htmlModal).modal({
    closeHTML: closeHTML,
    position: [top, left],
    overlayId: 'TestModal-overlay',
    containerId: 'TestModal-container',
    onOpen: TestModal.open,
    onShow: TestModal.show,
    onClose: TestModal.close
});

}

これは多かれ少なかれhttp://www.ericmmartin.com/projects/simplemodalからコピーされたコードです:

var TestModal = {
message: null,
height: 0,
open: function(dialog) {
    //$(this).parent().appendTo("form");
    $(dialog).parent().appendTo("form");
    // add padding to the buttons in firefox/mozilla
    if ($.browser.mozilla) {
        $('#TestModal-container .TestModal-button').css({
            'padding-bottom': '2px'
        });
    }
    // input field font size
    if ($.browser.safari) {
        $('#TestModal-container .TestModal-input').css({
            'font-size': '.9em'
        });
    }
    var h = 280;
    if (TestModal.height > 0)
        h = TestModal.height;

    var title = $('#TestModal-container .TestModal-title').html();
    $('#TestModal-container .TestModal-title').html('Laden...');
    dialog.overlay.fadeIn(200, function() {
        dialog.container.fadeIn(200, function() {
            dialog.data.fadeIn(200, function() {
                $('#TestModal-container .TestModal-content').animate({
                    height: h
                }, function() {
                    $('#TestModal-container .TestModal-title').html(title);
                    $('#TestModal-container form').fadeIn(200, function() {
                        $('#TestModal-container #TestModal-name').focus();

                        // fix png's for IE 6
                        if ($.browser.msie && $.browser.version < 7) {
                            $('#TestModal-container .TestModal-button').each(function() {
                                if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
                                    var src = RegExp.$1;
                                    $(this).css({
                                        backgroundImage: 'none',
                                        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
                                    });
                                }
                            });
                        }
                    });
                });
            });
        });
    });
},
show: function(dialog) {
    $('#TestModal-container .TestModal-close').click(function(e) {
        e.preventDefault();
        if ($('#TestModal-container .TestModal-errormessage:visible').length > 0) {
            var msg = $('#TestModal-container .TestModal-errormessage div');
            msg.fadeOut(200, function() {
                msg.empty();
                contact.showError();
                msg.fadeIn(200);
            });
        }
        else {
            $('#TestModal-container .TestModal-errormessage').animate({
                height: '30px'
            }, contact.showError);
        }
    });
},
close: function(dialog) {
    $('#TestModal-container .TestModal-errormessage').fadeOut();
    $('#TestModal-container .TestModal-title').html('Schliessen...');
    $('#TestModal-container form').fadeOut(200);
    $('#TestModal-container .TestModal-content').animate({
        height: 40
    }, function() {
        dialog.data.fadeOut(200, function() {
            dialog.container.fadeOut(200, function() {
                dialog.overlay.fadeOut(200, function() {
                    $.modal.close();
                });
            });
        });
    });
},
error: function(xhr) {
    alert(xhr.statusText);
},
showError: function() {
    $('#TestModal-container .TestModal-errormessage')
   .html($('<div class="TestModal-error">').append(contact.message))
   .fadeIn(200);
}
};

フローティング ウィンドウを 2 回目に開くと、警告ボックスに innerHTML が適用されたことが表示されますが、値「OrigValue」は表示されたままです。最初の試行では、常に正常に機能しています (「ChangedValue」が DIV 内に表示されます)。

ヒントをありがとう！

乾杯、ロジャー

4

3 に答える 3

0

ロジャー、

関数を次のように変更してみてください。

function changeContent() {
    var container = $('#TestModal-container')[0];
    $('#DivTest', container).html('ChangedValue');
    //$('#DivTestRoot').addClass('fake'); // ? why add class then removeClass?
    //$('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot', container).show();
    alert($('#DivTest', container).parent()[0].innerHTML);
}

問題は、コンテンツをバインドしてアクセスする方法にあると思います。問題が解決しない場合はお知らせください。

-エリック

于 2009-11-11T14:21:05.220 に答える
0

昨日は遅くなってしまいました！;-)

問題の短い、できればより明確な説明:

Javascript 関数は、SimpleModal ウィンドウ内から呼び出されます。この関数では、このモーダル ウィンドウにある一部のコンテンツが置き換えられます。たとえば、$('#DivTest').html('ChangedValue') です。

IE8 では、SimpleModal ウィンドウを閉じて再度開くと、このモーダル ウィンドウ内のコンテンツを変更したり、要素を非表示に設定したりすることはできなくなりました。DOM オブジェクトのコンテンツと属性が変更されていることがわかります。アラート機能を使用することにより、これらの変更はレンダリングされません。

この問題は FF では発生しません。

乾杯、ロジャー

于 2009-11-09T08:32:07.867 に答える
0

モーダル ウィンドウを閉じた後、IE8 が DOM オブジェクトを正しく削除していないように見えることがわかりました。

Javascript をデバッグすると、別のモーダル ウィンドウを開いた後、オブジェクトの古い値がまだ残っているのに、別のコンテンツがレンダリングされることがわかります。この状況では、IE8 はこれらのオブジェクトに対して何もしないことを「決定」します。

モーダル ウィンドウを閉じるときに、SimpleModal jQuery プラグインの $.modal.close() 関数が呼び出されます。FF ではすべての DOM オブジェクトがメモリから正しく削除されているように見えますが、IE8 ではそうではありません。

これらの調査結果の後、モーダル ウィンドウ内の iFrame と標準の aspx ページという別のアプローチを実装することにしました。よく働く。

乾杯、ロジャー

于 2009-11-12T20:32:03.593 に答える