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，如果我在页面加载后单击链接，它会像任何其他网页一样打开 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 回答