jQuery modals 和深度链接答案

【问题标题】：jQuery modals and deep linkingjQuery modals 和深度链接
【发布时间】：2013-03-22 15:19:39
【问题描述】：

我目前有一个画廊，当您单击缩略图时会打开一个模式弹出窗口。我想做的是能够为模态生成一个独特的链接（即；www.mywebite.com/#link1），它通过ajax加载它的内容。如果有人要发送这个独特的模态链接并将其发送给某人并将其粘贴到他们的浏览器中，理想情况下，我希望模态窗口自动加载和显示其内容，而无需用户单击相应的缩略图。

这甚至可能吗？我知道这不是最简单的任务，我们将不胜感激。

要了解我的工作内容，请访问： http://www.ddbremedy.co.uk/siteupdate/work

您将看到一个带有缩略图的 iMac 屏幕。

非常感谢。

更新！！！！！！

好的，这就是我目前所在的位置。我决定使用 jquery 地址报废，改为使用 'window.location.hash' 进行深度链接。

代码是这样的：

var base_url = "http://www.ddbremedy.co.uk/siteupdate/";

$('#work_gallery li a').on('click', function(event) {

    event.preventDefault();
    postLink = $(this).attr('href');
    window.location.hash = postLink.replace(base_url, "");


    /* I have a bunch of code that animates the modal window 
    in which I don't need to include as there is quite alot of it.
    Content loads via ajax. Then when I close the modal I add this 
    code to remove the hash and revert the link back to its original state. */

    if ("pushState" in history) {
        history.pushState("", document.title, window.location.pathname);
    } else {
        window.location.hash = "";
    }

});

当我使用 ajax 加载和关闭外部内容时，上面的代码工作正常，并且完全按照我想要的方式显示链接。现在我需要弄清楚的是，如果有人获取该链接并将其粘贴到地址栏中，我如何自动加载 ajax 内容。内容是根据链接 href 和点击事件加载的，那么我如何欺骗浏览器认为点击了正确的链接并加载正确的内容，纯粹基于它的链接？

【问题讨论】：

我认为这些可能会对您有所帮助。 asual.com/jquery/address 和 github.com/balupton/History.js
您好，感谢您的回复。我已经在使用 jQuery 地址来创建深层链接，我似乎可以开始工作了。问题是将该网址粘贴回一个单独的窗口并激活模式。
你应该发布你的代码然后:) 我会一直到明天，但如果这里有人没有帮助你，我当然可以明天回复你。如果您已经设置了地址，则很可能需要调整代码以使其按照您想要的方式工作。
你好，我已经编辑了我最初的问题并添加了一些代码。谢谢。

标签： jquery

【解决方案1】：

设法让它工作。我就是这样做的：

首先我运行一个名为“checkUrl”的函数，它检查 URL 以查看它是否包含哈希。

checkUrl = function() {
    if (window.location.hash) {

    }
};

checkUrl();

然后在 if 语句中，我将哈希路径存储到变量中并将其从哈希中拆分出来。然后我将哈希后的字符串存储到一个变量中。

var pathname = window.location.hash,
    rez = pathname.split('#'),
    linkUrl = rez[1];

然后，我将该变量作为具有该特定 href 的链接的选择器传递，并在相应链接上触发单击事件，然后以正确的模式进行动画处理并加载。

$("a[href='http://www.ddbremedy.co.uk/siteupdate/" + linkUrl + "']").trigger('click');

希望这对将来的某人有所帮助。

【讨论】：

效果很好！做得好。这个图片网站我按照你的方法journal.tumultes.net/les-iles-traversees

【解决方案2】：

这是完全可能的。使用jquery simplemodal的半伪代码：

$(document).ready(function () {
    /* Get the hash from window.location */
    var theHash = window.location.hash;
    if (theHash !== '') 
    {
        /* Load something related to it */
        $.get(something-from-somewhere, function(data) {
           /* Open the simplemodal and put the returned data inside it */
           $.modal(data);
        });
    }
});

显然，您可以使用模态执行更多操作，您可以在 the documentation 中找到。

【讨论】：