1

我有一个带有以下代码的 PrimeFaces 页面:

<pm:content id="content">
    <p:dataList value="#{likeditems.likedItems}" var="item" pt:data-inset="true" paginator="true" rows="5">
        <f:facet name="header">
            Products you liked in the past
        </f:facet>
        <h:outputLink value="#{item.url}" target="_new">
            <p:graphicImage name="http://example.com/my-product-mobile/f/op/img/underConstructionImage.jpg" />
            <h2>#{item.title}</h2>
            <p>Approx. #{item.price} (for most up-to-date price, click on this row and view the vendor's page)</p>
        </h:outputLink>
        <f:facet name="footer">
            Products you liked in the past
        </f:facet>
    </p:dataList>
</pm:content>

当用户点击 时h:outputLink,我希望发生两件事:

  1. item.url在浏览器中打开一个带有 URL 的新页面。
  2. 方法likeditems.itemLinkClicked(item)被调用(在该方法中,我更新了特定链接被点击的次数)。

第一件事已经开始工作了(target="_new")。

如何在第一个停止工作的情况下实现第二个(更新链接被点击次数的方法调用)?

4

1 回答 1

2

第一件事已经开始工作了(target="_new")。

目标实际上应该是_blank


如何在第一个停止工作的情况下实现第二个(更新链接被点击次数的方法调用)?

最简单(天真的)JSF-ish 方式是触发<p:remoteCommand>点击。

<h:outputLink value="#{item.url}" target="_blank" onclick="count_#{item.id}()">
    ...
</h:outputLink>
<p:remoteCommand name="count_#{item.id}" action="#{likeditems.itemLinkClicked(item)}" />

但这会产生大量重复的 JS 代码,效果不佳。您可以将其放在数据列表之外并摆弄函数参数。但是,当最终用户右键单击并选择上下文菜单项(在新选项卡、新窗口、新隐身窗口中打开、另存为、复制地址等)时,这仍然不起作用。当最终用户中间点击时,这也不起作用(中间点击的默认浏览器行为是“在新窗口中打开”)。

ZEEF,我们使用脚本将<a href>点击、中间点击或右键单击更改为一个 URL,该 URL 调用一个更新计数的 servlet,然后window.open()对给定的 URL 执行操作。

给定一个

<h:outputLink value="#{item.url}" styleClass="tracked" target="_blank">

相关脚本基本上应该是这样的:

// Normal click.
$(document).on("click", "a.tracked", function(event) {
    var $link = $(this);
    updateTrackedLink($link);
    var trackingURL = $link.attr("href");
    $link.attr("href", $link.data("href"));
    $link.removeData("href");
    window.open(trackingURL);
    event.preventDefault();
});

// Middle click.
$(document).on("mouseup", "a.tracked", function(event) {
    if (event.which == 2) {
        updateTrackedLink($(this));
    }
});

// Right click.
$(document).on("contextmenu", "a.tracked", function(event) {
    updateTrackedLink($(this));
});

// Update link href to one of click count servlet, if necessary.
function updateTrackedLink($link) {
    if ($link.data("href") == null) {
        var url = $link.attr("href");
        $link.data("href", url);
        $link.attr("href", "/click?url=" + encodeURIComponent(url));
    }
}

并且 click servlet 应该如下所示(为简洁起见,省略了请求参数验证):

@WebServlet("/click")
public class ClickServlet extends HttpServlet {

    @EJB
    private ClickService clickService;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String url = request.getParameter("url");
        clickService.incrementClickCount(url);
        response.sendRedirect(url);
    }

}

请注意,这种方式target="_blank"不是必需的。它只会被禁用 JavaScript 的用户使用。但是网站上还有很多其他的东西无论如何都不起作用,包括上面的 JS 跟踪。这也是你真正关心的问题,那么你最好直接把那个 click servlet URL 放在<h:outputLink value>.

于 2015-01-07T20:23:53.953 回答