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屋!