更新

Question

我们公司希望在我们网站的新闻栏目中加入LinkedIn分享按钮。它相对简单，包含一个旋转木马，可以在Colorbox窗口中单独打开新闻。我们希望LinkedIn按钮位于Colorbox窗口内，以便我们可以共享每个新闻项的详细信息。

所以，我已成功启用hashchange事件，当Colorbox被激活时，为每个新闻项显示正确的url，而LinkedIn按钮确实在共享新闻项时返回正确的url，但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(/&amp;/),
        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剥离到最低限度。您将看到您的内容现在通过colorbox通过ajax加载，但是，您对这些路径做错了，因为无法找到图像。

我看了http://jsfiddle.net/WvfsA/13/，我不确定为什么你有2个嵌套的$（function（）{}），我在Framework＆amp;已经选择了扩展，ondomready，因此您不需要将主要功能包装在任何内容中。

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

当你开发时，你是通过服务器运行你的例子吗？你需要有一个本地服务器，以便与ajax相关的任何工作。

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

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

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

更新

2 个答案: