如何构造一个 URL 以使用 jquery 灯箱插件 colorbox 打开页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1383304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to construct a URL to open a page with jquery lightbox plugin colorbox?
提问by Ritchie
I am using jquery lightbox plugin colorbox (http://colorpowered.com/colorbox/) and i want to be able to construct a URL like www.example.com/about-me.html which will send the user to my website and open the iframed page (about-me.html) within the lightbox script.
我正在使用 jquery 灯箱插件 colorbox ( http://colorpowered.com/colorbox/)，我希望能够构建一个像 www.example.com/about-me.html 这样的 URL，它将用户发送到我的网站和在灯箱脚本中打开 iframe 页面 (about-me.html)。
I believe i have to use event hooks or something but i am not sure how to achieve the result. Any help appreciated.
我相信我必须使用事件挂钩或其他东西，但我不确定如何实现结果。任何帮助表示赞赏。
回答by Ritchie
Credit goes to Hyman Moore on the colorbox google group.
归功于 colorbox google group 的 Hyman Moore。
His solution adapted to this question:
他的解决方案适用于这个问题：
var url = document.location.href;
if(url.search(/\?about-me/i) !== -1){
$(".iframe:first").click();
}
So the url would be www.example.com?about-me this would take the user to the homepage and this javascript will find that parameter and tell colorbox to open it.
所以 url 将是 www.example.com?about-me 这会将用户带到主页，这个 javascript 将找到该参数并告诉 colorbox 打开它。
Original google group thread and more info: http://groups.google.com/
原始谷歌群组线程和更多信息：http: //groups.google.com/
回答by robjmills
edit - have updated my example source code below
编辑 - 在下面更新了我的示例源代码
i'm not familiar with that lightbox but I would assume that all you need to do is create a page and call the lightbox on window.load or dom ready like:
我不熟悉那个灯箱，但我认为您需要做的就是创建一个页面并在 window.load 或 dom 上调用灯箱准备好，例如：
$(document).ready(function () {
if(document.location.hash){
//launch colorbox and use this hash
$.fn.colorbox({width:"50%", inline:true, href:""+document.location.hash+""});
}
});
回答by tvanfosson
Look at the exampleson how to access other content. If I understand your question correctly, you want to display an external source in an iframe. You can do that using:
查看有关如何访问其他内容的示例。如果我正确理解您的问题，您希望在 iframe 中显示外部源。你可以使用：
(from the example page)
（来自示例页面）
$(".iframe").colorbox({iframe:true});
<p><a class='iframe' href="http://google.com">Outside webpage (IFrame)</a></p>
Update: if what you want is to have something like the code above appear on the page when you enter a url, then I suggest that you use parameters or url rewriting to accomplish it. The idea would be that your url would include the page to load in the iframe and on the server you would extract this and use it to construct something like the code above on your page.
更新：如果您想要的是在您输入网址时在页面上出现类似上述代码的内容，那么我建议您使用参数或网址重写来完成它。这个想法是，您的 url 将包含要加载到 iframe 中的页面，并且在服务器上，您将提取它并使用它来构建类似于上面页面上的代码的内容。
http://www.example.com/main?load=about.htm
or using something like MVC, you might have:
或者使用 MVC 之类的东西，你可能有：
http://www.example.com/main/about
Which would invoke the about action on the main controller. This would render a view that contains the code injecting the "about.htm" content file into the iframe.
这将调用主控制器上的 about 操作。这将呈现一个视图，其中包含将“about.htm”内容文件注入 iframe 的代码。
