jQuery模态和深层链接 [英] jQuery modals and deep linking

问题描述

我目前有一个画廊，当您单击缩略图时，该画廊会打开一个模式弹出窗口.我想做的是能够生成一个专门用于模式的唯一链接(即www.mywebite.com/#link1)，该链接通过ajax加载其内容.如果有人要发送此唯一的模式链接并将其发送给某人，然后将其粘贴到他们的浏览器中，则理想情况下，我希望模式窗口自动加载并显示其内容，而无需用户单击适当的缩略图.

I currently have a gallery which opens a modal pop up when you click on the thumbnail. What I would like to do is to be able to generate a unique link specifically for the modal (i.e.; www.mywebite.com/#link1), which loads it's content via ajax. If somebody was to send this unique modal link and send it to someone and they were to paste it into their browser, ideally I would like the modal window to load and display its content automatically, without the user having to click on the appropriate thumbnail.

这甚至有可能吗?我知道这不是最简单的任务，对此将提供任何帮助.

Is this even possible?? I know this is not the easiest of tasks and any help with this would be greatly appreciated.

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

To get an idea of what I'm working on go to: http://www.ddbremedy.co.uk/siteupdate/work

您将看到一个iMac屏幕，上面带有缩略图.

You will see an iMac screen with the thumbnails on it.

非常感谢.

更新!!!!!

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

Ok this is where I am currently at. I have decided to scrap using jquery address and am deep linking using 'window.location.hash' instead.

代码是这样的:

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事件加载的，那么我将如何欺骗浏览器，以为单击了正确的链接并仅基于链接来加载正确的内容?

The above code works fine and displays the link exactly as I want it to when I load and close external content with ajax. Now what I need to figure out is how I can automatically load the ajax content if somebody takes that link and pastes it in the address bar. The content is loaded based on the links href and a click event, so how would I trick the browser into thinking that the correct link was clicked and load the correct content, purely based on it's link?

推荐答案

设法使其正常运行.这是我的方法:

Managed to get it working. This is how I did it:

首先，我运行一个名为"checkUrl"的函数，该函数检查URL以查看其是否包含哈希.

First I run a function called 'checkUrl' which checks the URL to see if it contains a hash.

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

    }
};

checkUrl();

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

Then within the if statement I store the hash path into variable and split it from the hash. I then store the string after the hash into a variable.

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

然后我将该变量作为具有该href的链接的选择器传递，并触发相应链接上的click事件，然后为该动画设置动画并加载正确的模式.

I then pass that variable as a selector for the link that has that particular href and trigger a click event on the corresponding link, which then animates and loads in the correct modal.

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

希望这会在将来对某人有所帮助.

Hopefully this will help someone in the future.

这篇关于jQuery模态和深层链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！