如何在 colorbox 中提供静态 html 页面?

How to serve static html pages inside colorbox?

我的 grails 应用程序中几乎没有要显示的静态 html 页面。但我发现很难做到这一点。我需要像这样从 js 脚本中显示一个 .html 文件

function alertExpiry(){
    $.colorbox({iframe:true, width:"50%", height:"50%", href: "expiry.html"});
}

我希望显示 expiry.html 页面。我把 html 文件放在 views/home/expiry.html 下 版本:grails 3.2.9

如果您想从 grails 应用程序提供静态页面,无需将这些页面添加到视图目录中,请在 中创建一个目录 home web-apps 将所有静态 html 文件放入此目录,如

web-apps -> home -> expiry.html

现在在您的 colorbox jquery 插件中获取此资源,如下所示

<div class="popup">
open colorbox
</div>

$(function() {
   $(".popup").colorbox({
    iframe:true,
    width:"500px",
    height:"500px",
    href : "YOUR_APP_NAME/home/expiry.html",
    onClosed:function(){ alert('popup icon closed !')},
   });
});

Grails 项目结构:http://www.vogella.com/tutorials/Grails/img/xfirstgrailsapplication10.png.pagespeed.ic.eLfC9gNB16.webp

UrlMappings 文件中,我放入以下行

"/page/$id" (controller: "staticPage", action:"index", params:["id": "$id"])

然后我在 StaticPageController 中写了以下登录

class StaticPageController {
    GrailsConventionGroovyPageLocator groovyPageLocator

    def index() {
        if (groovyPageLocator.findViewByPath("/home/${params.id}") != null) {
            return render (view:"/home/${params.id}")
        }
        redirect(controller: "home")
    }
}

我又做了一个改变。我将 expiry.html 页面更改为 expiry.gsp 现在 link 是

$.colorbox({iframe: true, width: "50%", height: "50%", href: "page/expiry"});

终于如愿以偿