我正在使用 jquery lightbox 插件颜色框(http://colorpowered.com/colorbox/),我希望能够构建一个像 www.example.com/about-me.html 这样的 URL,它将用户发送到我的网站和在灯箱脚本中打开 iframed 页面 (about-me.html)。
我相信我必须使用事件挂钩或其他东西,但我不确定如何实现结果。任何帮助表示赞赏。
我正在使用 jquery lightbox 插件颜色框(http://colorpowered.com/colorbox/),我希望能够构建一个像 www.example.com/about-me.html 这样的 URL,它将用户发送到我的网站和在灯箱脚本中打开 iframed 页面 (about-me.html)。
我相信我必须使用事件挂钩或其他东西,但我不确定如何实现结果。任何帮助表示赞赏。
归功于彩盒谷歌组的 Jack Moore。
他的解决方案适应了这个问题:
var url = document.location.href;
if(url.search(/\?about-me/i) !== -1){
$(".iframe:first").click();
}
所以 url 将是 www.example.com?about-me 这会将用户带到主页,这个 javascript 会找到该参数并告诉 colorbox 打开它。
原始谷歌组线程和更多信息:http ://groups.google.com/
编辑 - 在下面更新了我的示例源代码
我不熟悉那个灯箱,但我认为您需要做的就是创建一个页面并在 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+""});
}
});
查看有关如何访问其他内容的示例。如果我正确理解您的问题,您想在 iframe 中显示外部源。你可以这样做:
(来自示例页面)
$(".iframe").colorbox({iframe:true});
<p><a class='iframe' href="http://google.com">Outside webpage (IFrame)</a></p>
更新:如果您想要在输入 url 时在页面上出现类似上述代码的内容,那么我建议您使用参数或 url 重写来完成它。这个想法是您的 url 将包含要加载到 iframe 和服务器上的页面,您将提取它并使用它在您的页面上构建类似于上面代码的内容。
http://www.example.com/main?load=about.htm
或者使用类似 MVC 的东西,你可能有:
http://www.example.com/main/about
这将调用主控制器上的 about 操作。这将呈现一个视图,其中包含将“about.htm”内容文件注入 iframe 的代码。