0

シャドーボックスで開く必要があるリンクのリストを Javascript で生成しています。最初は、任意のページ ロード (たとえば Ctrl-F5) で、リンクはシャドウ ボックスではなくウィンドウで開きます。運や偶然の偶然によって、シャドウボックスで開くことができれば、ページが再度リロードされるまで機能します。

ページ内のマークアップは次のとおりです。

<div id="portAgreementList">
    <ul id="blAgreements"></ul>
</div>

blAgreements でリンクを作成する JavaScript は次のとおりです。

function (data, status)
{
    if (status == 'success')
    {
        if (data == '')
        {
            alert('URL returned no data.\r\n' +
                'URL: ' + url);
            return;
        }
        var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js

        if (!jsonObj) { return; }
        var items = '';

        if ( jsonObj.items.length > 0 ) {
            for (var xx = 0; xx < jsonObj.items.length; xx++) {
                items += '<li><a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + 
                jsonObj.items[xx].Text +'</a></li>';
            }
        }
        else {
            items = '<li>You have no port agreements on file for this company.</li>';
        }
        $('#blAgreements').html(items);
        Shadowbox.init();
    }
}

Shadowbox.init(); を呼び出しています。リスト項目の作成を追加した後、時々動作します。私が理解したいのは、なぜ一貫性がないのか、どうすれば信頼性を高めることができるのかということです。

更新 #1:これは競合状態のようです。少なくとも IE でページをロードし、クリックする前に待つと、最終的には機能します。IE8では約3秒待たなければなりません。FF はその動作に従っていないようです。

更新 #2: FF では、ページの読み込み後にリンクをクリックすると、他の Web ページと同じように URL が開きます。戻るボタンを押してリンクをもう一度クリックすると、URL がシャドウボックスに表示されます。

4

1 に答える 1

0

さらに掘り下げて解決策を見つけましたが、上記の問題が発生した理由を知りたいのですが。

function (data, status)
{
    if (status == 'success')
    {
        if (data == '')
        {
            alert('URL returned no data.\r\n' +
                'URL: ' + url);
            return;
        }
        var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js

        if (!jsonObj) { return; }
        var items = '';

        if ( jsonObj.items.length > 0 ) {
            for (var xx = 0; xx < jsonObj.items.length; xx++) {
                var li = $('<li></li>').appendTo('#blAgreements');
                var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + 
                jsonObj.items[xx].Text +'</a>').appendTo(li);
                Shadowbox.setup($(anchor), null);
            }
        }
        else {
            items = '<li>You have no port agreements on file for this company.</li>';
        }
    }
}

主な違いは、DOM を要素として構築していることです。

var li = $('<li></li>').appendTo('#blAgreements');
var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + jsonObj.items[xx].Text +'</a>').appendTo(li);

そして、次のように呼び出します。

Shadowbox.setup($(anchor), null);

アンカーで。

于 2011-02-03T18:53:05.237 に答える