2

我目前有一个画廊，当您单击缩略图时会打开一个模式弹出窗口。我想要做的是能够为模态生成一个独特的链接（即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 和 click 事件加载的，那么我如何诱使浏览器认为点击了正确的链接并加载正确的内容，纯粹基于它的链接？

4

2 回答 2

3

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

首先，我运行一个名为“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');

希望这将有助于将来的某人。

于 2013-03-26T10:59:36.413 回答
1

这是完全可能的。使用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);
        });
    }
});

显然，您可以使用模态执行更多操作，您可以在文档中找到这些内容。

于 2013-03-22T15:28:07.377 回答