Question

我正在使用jquery灯箱插件颜色框（http://colorpowered.com/colorbox/），我希望能够构建一个像www.example.com/about-me.html这样的网址，它会将用户发送到我的网站并打开在灯箱脚本中的iframed页面（about-me.html）。

我相信我必须使用事件挂钩或其他东西，但我不知道如何实现结果。任何帮助表示赞赏。

Answer 1

在colorbox google小组上获得了杰克摩尔的信用。

他的解决方案适应了这个问题：

var url = document.location.href;
if(url.search(/\?about-me/i) !== -1){
    $(".iframe:first").click();

}

所以网址是www.example.com?about-me这会将用户带到主页，这个javascript会找到该参数并告诉colorbox打开它。

原始Google群组主题和更多信息：http://groups.google.com/

Answer 2

编辑 - 更新了我的示例源代码

我不熟悉那个灯箱，但我认为您需要做的就是创建一个页面并在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+""});
   }
});

Answer 3

查看有关如何访问其他内容的examples。如果我正确理解您的问题，您希望在iframe中显示外部来源。您可以使用以下方式执行此操作：

（来自示例页面）

$(".iframe").colorbox({iframe:true});

<p><a class='iframe' href="http://google.com">Outside webpage (IFrame)</a></p>

更新：如果你想要的是输入网址时页面上会出现类似上面代码的内容，那么我建议您使用参数或网址重写来完成它。我们的想法是，您的网址将包含要在iframe中加载的网页，并在服务器上提取，并使用它来构建类似上面代码的页面。

http://www.example.com/main?load=about.htm

或使用像MVC这样的东西，你可能有：

http://www.example.com/main/about

哪个会调用主控制器上的about操作。这将呈现一个视图，其中包含将“about.htm”内容文件注入iframe的代码。

如何使用jquery lightbox插件colorbox构建一个打开页面的URL？

3 个答案: