JSF 页面中的 JavaScript 未按 ID 获取 Canvas 的元素答案

【问题标题】：JavaScript inside JSF page not getting element by ID for CanvasJSF 页面中的 JavaScript 未按 ID 获取 Canvas 的元素
【发布时间】：2014-06-10 03:18:37
【问题描述】：

由于在 JSF 中使用 h5: 标记似乎不可能做画布（我找到了一个教程，但它说用于 h5 的 xmlns 地址在 netbeans 中被报告为无效）我决定只使用好的旧 html。问题是我的 ctx1 = ct1.getContext("2D") 报告它无法设置“null”属性，这意味着我的第一行 c1 = document.getElement... 返回 null。我不明白为什么。

基本上我所做的是在画布的页面上显示点击次数（使用 cookie）和用户的 IP 地址和服务器的时间。我使用 3 种不同的画布，因为它比试图弄清楚如何制作多行画布更容易。

我知道 BEAN 的工作，因为我可以将它们放在 javascript 和/或画布代码之外，它会显示正确的信息。所以这是关于 javascript 无法获取不同画布元素的 ID 的问题。有什么想法吗？

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>User Info</title>
    </h:head>
    <h:body>
        <br></br>

        <canvas id="hitsCanvas" width="200px" height="50px"></canvas>
        <br></br>
        <canvas id="ipCanvas" width="200px" height="50px"></canvas>
        <br></br>
        <canvas id="timeCanvas" width="200px" height="50px"></canvas>

        <script>
                var c1 = document.getElementById("hitsCanvas");
                var c2 = document.getElementById("ipCanvas");
                var c3 = document.getElementById("timeCanvas");

                var ctx1 = c1.getContext("2D");
                var ctx2 = c2.getContext("2D");
                var ctx3 = c3.getContext("2D");

                ctx1.font = "30px Arial";
                ctx2.font = "30px Arial";
                ctx3.font = "30px Arial";

                ctx1.fillText("Hits:#{CookieBean.getCookie()}");
                ctx2.fillText("IP Address: ${CookieBean.getIP()}");
                ctx3.fillText("IP Address: ${CookieBean.getTime()}");
        </script>

    </h:body>
</html>

CookieBean.java

import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;
import javax.enterprise.context.SessionScoped;
import javax.faces.context.FacesContext;
import javax.inject.Named;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

@Named(value = "CookieBean")
@SessionScoped
public class CookieBean implements Serializable {

    int hits;

    public int getHits() {
        return hits;
    }


    public void setHits(int hits) {
        this.hits = hits;
    }


    public String getCookie() {
        Map<String, Object> requestCookieMap = FacesContext.getCurrentInstance().getExternalContext().getRequestCookieMap();
        Cookie hitsCookie = (Cookie)requestCookieMap.get("hits");

        Map<String,Object> properties = new HashMap<>();
        properties.put("maxAge", 31536000);

        if (hitsCookie == null) {
           FacesContext.getCurrentInstance().getExternalContext().addResponseCookie("hits", "1", properties);
           return "1";
        }
        else {
            String newCookieHits = hitsCookie.getValue();
            int intCookie = Integer.parseInt(newCookieHits);
            intCookie++;
            String stringCookies = Integer.toString(intCookie);
            FacesContext.getCurrentInstance().getExternalContext().addResponseCookie("hits", stringCookies, properties);

            return stringCookies;
        }
    }

    public String getIP() {

        HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
        String ipAddress = request.getHeader("X-FORWARDED-FOR");
        if (ipAddress == null) {
        ipAddress = request.getRemoteAddr();
    }

    return ipAddress;
    }

    public CookieBean() {

    }

    public String getTime() {
        String timeStamp = new SimpleDateFormat("HH:mm:ss").format(Calendar.getInstance().getTime());
        return timeStamp;
    }

}

【问题讨论】：

标签： java javascript html jsf canvas

【解决方案1】：

所以我在这里诅咒 JSF 和 HTML5 并想知道为什么这个愚蠢的代码不起作用，在我在这里提交了这个以及一个副本给我的导师（这是大学的家庭作业）之后，我在大约 5 分钟内弄明白了。

怎么样？首先，我在没有 JSF 的情况下将相同的代码写入常规 HTML 页面，但它仍然无法正常工作，所以在查看了一些 w3c 示例后，我发现了问题所在。更改了以下代码行：

var ctx1 = c1.getContext("2D");

到

var ctx1 = c1.getContext("2d");

是的……差不多就是这样。我还必须将 x,y 值添加到 filltext 到位置。

【讨论】：