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

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

所以，当Colorbox被激活时，我已经成功地让hashchange事件工作，以便显示每个新闻项目的正确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/

试着在http://jsfiddle.net/上放一些示例代码，然后在这里分享。

你张贴了你的js，但我们没有你试图使用它的标记，所以张贴最少必要的html代码，使你的例子工作在一个fiddle。

这将帮助别人更容易地想象你的问题，并很可能更快地为你找到解决方案。

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通过colorbox加载，但是，你做了一些错误的路径，因为无法找到图像。

我看了看http://jsfiddle.net/WvfsA/13/，我不确定为什么你有2嵌套$(function(){})，我看到在框架&扩展，ondomready已经被选中了，所以你真的不需要在任何东西中包装你的main函数。

这里有一个快速的截图来证明它是有效的:https://i.stack.imgur.com/ajJ5Z.png

当您在开发时，您是否通过服务器运行您的示例?您需要有一个本地服务器，以便任何与ajax相关的工作。

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

编辑:或者你可以在Chrome上开发与我提到的标志，以绕过本地web服务器的需要，但这不是一个真正的好主意。

相关内容

最新更新

热门标签：