Question

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

这甚至可能吗？我知道这不是最简单的任务，对此的任何帮助都将非常感激。

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

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

非常感谢提前。

UPDATE !!!!!

好的，这就是我目前所处的位置。我决定使用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和点击事件加载的，那么我如何欺骗浏览器认为点击了正确的链接并加载了正确的内容，纯粹基于它的链接？

Answer 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');

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

Answer 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中找到它。

jQuery模式和深层链接

2 个答案: