javascript - java backing bean加载图片后自动调用JS函数

Question

我需要我的 JS在 java backing bean 返回图像后自动调用调整大小函数。这是 xhtml负责图片加载的部分。它是 dataGrid 的一部分.

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}"  width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

这是bean方法:

public StreamedContent getImage() throws IOException {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
        return new DefaultStreamedContent();
    }
    else {
        String id = context.getExternalContext().getRequestParameterMap().get("id");
        return findImage(Long.valueOf(id));
    }
}

完成渲染阶段后，它会转到返回实际图像的 else 分支。

我有工作JS函数 resizeImage() .我通过添加属性 onclick="resizeImage()" 来测试它至 <p:graphicImage>然后单击图像并正确调整大小。我现在需要的是这个函数的自动调用。 <p:graphicImage>没有任何我可以使用的属性。我也试过<p:ajax oncomplete="resizeImage()" />参与<p:graphicImage>节点，但每次我使用 ajax返回此错误:

Event attribute could not be determined: null

我还有一个子问题。最终的实际图像 ID HTML是contentForm:kprods:7:image1其中数字根据顺序是可变的。有没有办法传递给 JS元素的id作为参数？

非常感谢。

Answer 1

好吧，我找到了解决方案。基本上我所需要的只是在 load 事件上运行我的函数。但是 primefaces 元素 <p:graphicImage>没有 onload 属性。

所以我为传递属性添加到我的 xhtml 新命名空间:

xmlns:x="http://xmlns.jcp.org/jsf/passthrough" .

并添加了x:onload graphicImage 元素的属性:

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}" x:onload="resizeImage(this.id)" width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

然后我检查了最终的 HTML 并且有一个 onload 属性，我的函数被添加到 <img>元素。