使用 hashchange 事件生成的链接打开 ColorBox

Question

我们公司希望在我们网站的新闻部分包含一个 LinkedIn 分享按钮。它相对简单，由一个轮播组成，可在 Colorbox 窗口中单独打开新闻项目。我们希望 LinkedIn 按钮位于 Colorbox 窗口中，以便我们可以共享每个新闻项目的详细信息。

所以，当 Colorbox 被激活以显示每个新闻项目的正确 url 并且 LinkedIn 按钮在新闻项目被共享时确实返回正确的 url 时，我已经成功地让 hashchange 事件工作，但是 Colorbox 没有打开，它只是链接到我们网站的索引页面。我的问题是如何从这个共享链接启动 Colorbox？

我研究了很多类似的问题，但似乎无法让它发挥作用。任何帮助将非常感激。谢谢。

下面是我的 js 也是一个 jsfiddle：http://jsfiddle.net/stegern/WvfsA/11/

$(document).ready(function() 
    {
    //Carousel for news items
    $('#news-carousel').show();
    $('#news-carousel').jcarousel({
            vertical:true,
            scroll:true,
            wrap:'circular'
        }
    );
    $('.popup').colorbox({
            title: function()
                {
                    var url = $(this).attr('href');
                    return '#' + url;
                },
            onOpen:function()
                { 
                    window.location.hash = $(this).attr('href');
                }, 
            onClosed:function()
                { 
                    window.location.hash = "";
                },
            opacity: 0.7,
            transition: 'fade'          
        }
    );
    //Attempt to open ColorBox when url is shared

    $(function(){ 
    var hash = window.location.hash;
    if ('onhashchange' in window)
        {
            window.onhashchange = hashChanged;
        } 
    else 
        {
            setInterval(function(){
                    if (window.location.hash != hash)
                        {
                            hash = window.location.hash;
                            hashChanged();
                        }
            }, 500);
        }
        var hashChanged = function(){
            $.colorbox();
        }
    }
   );
});

更新

我进行了更多研究，发现我需要将我的内容加载到 iframe 中，而不是使用 Ajax。然后我需要向我的新闻项目链接添加一个查询字符串并解析查询字符串中的参数，以便将它们传递给 ColorBox。

但是，我现在遇到了我的 js（第 8 行预期的 ')' 标记）的语义问题，我不知道如何解决。谁能解释一下。

这是我的 html 标记：

<ul>
<li><a href="http://www.sblm.com/news/test/arew-news-test.html?open=true&amp;iframe=true" class="cb">News Item One</a>

</li>
<li><a href="http://www.sblm.com/news/test/icsc-recon-test.html?open=true&amp;iframe=true" class="cb">News Item Two</a>

</li>
<li><a href="http://www.sblm.com/news/test/warehouse-test.html?open=true&amp;iframe=true" class="cb">News Item Three</a>

</li>

这是我的 js：

    function getParameters() {
    var
    settingsObject = {},
    hash,
    hashes = location.search.substring(1).split(/&/),
        i;

    for (i = 0; i & lt; hashes.length; i++) {
        hash = hashes[i].split('=');
        settingsObject[hash[0]] = hash[1];
    }
    return settingsObject;
}
$('a.cb').colorbox($.extend({
    iframe: true,
    width: '800',
    height: '600'
}, getParameters()));

我还有一个 jsfiddle 设置：http://jsfiddle.net/stegern/NtSvg/7/

Answer 1

尝试将一些示例代码放在http://jsfiddle.net/ 的小提琴中，然后在此处分享。

您发布了您的 js，但我们没有您尝试使用它的标记，因此请发布最少必要的 html 代码以使您的示例顺利运行。

它将帮助其他人更轻松地想象您的问题，并且很可能更快地为您提供解决方案。

Answer 2

Ajax 未加载，因为出于安全原因，浏览器通常不允许跨域文件访问。由于主要代码托管在 jsfiddle 上，因此它禁止您通过 ajax 从您的站点加载页面。

快速解决方法，如果您使用的是 Chrome，您可以在不太安全的模式下启动它，如下所示：https://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time

我刚刚通过在chrome.exe所在的文件夹中打开命令提示符并运行chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security进行测试

然后我打开 http://jsfiddle.net/WvfsA/12/ ，在那里我将你的 js 剥离到最低限度。您会看到您的内容现在是通过颜色框通过 ajax 加载的，但是，您在这些路径上做错了，因为找不到图像。

我看了一下http://jsfiddle.net/WvfsA/13/，我不确定为什么你有 2 个嵌套的 $(function () {})，我看到在 Framework & Extensions 中，ondomready 已经被选中，所以你没有确实需要将您的主要功能包装在任何东西中。

这是一个快速的屏幕截图，以证明它有效： http://i.imgur.com/jAiUW28.png?1

当您进行开发时，您是否通过服务器运行您的示例？你需要有一个本地服务器才能让任何与 ajax 相关的工作。

如果您还没有安装 XAMPP http://www.apachefriends.org/en/xampp.html？

编辑：或者您可以在使用我提到的那个标志启动的 Chrome 上进行开发，以绕过本地网络服务器的需要，但这不是一个好主意。