Question

我正在生成Javascript中应该在shadowbox中打开的链接列表。最初，在任何给定页面加载（例如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。

Answer 1

更多的挖掘，我找到了解决方案，但我仍然想知道上面为什么会出现问题。

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);

在锚点上。

在IE和FF中，Shadowbox无法一致打开

1 个答案: