编写将包含在其他网站中的js的正确方法是什么？

Question

我需要编写一个脚本，我想将其包含在不同的网站上（类似于您必须包含在网站页面中的谷歌分析js）。

该脚本必须向我的一个 servlet（我正在使用 java）发送一个请求。

在 servlet 中，我需要增加一些变量，然后将图像返回给客户端。该图像将显示在用户访问的网站上。

我还需要在 servlet 中获取客户端的信息（ip 等）。如果我使用 getRemoteAddr() 方法，在这种情况下它会起作用吗？

此外，我需要跟踪我向客户端显示的图像。（我不知道这应该在哪里，客户端还是服务器端）。

这是执行此操作的正确方法吗？

Answer 1

您的 JS 必须将指向 1x1 透明 GIF 图像的 打印/附加到文档中。 JS 收集的所有信息都可以作为图像 URL 上的查询字符串发送。 Google Analytics（分析）会执行类似的事情。

基本上：

<script src="http://yourdomain.com/track.js"></script>

with：

var requestURI = window.location;
var referrer = document.referrer;
var resolution = screen.width + 'x' + screen.height;
var colorDepth = screen.colorDepth;
// ...

var query = '?requestURI=' + encodeURIComponent(requestURI)
          + '&referrer=' + encodeURIComponent(referrer)
          + '&resolution=' + encodeURIComponent(resolution)
          + '&colorDepth=' + encodeURIComponent(colorDepth);

document.write('<img src="http://yourdomain.com/track.gif' + query + '" />');

然后，在 yourdomain.com 中，您必须在图像 URL 上映射 servlet：

<servlet>
    <servlet-name>trackServlet</servlet-name>
    <servlet-class>com.example.TrackServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>trackServlet</servlet-name>
    <url-pattern>/track.gif</url-pattern>
</servlet-mapping>

在 doGet() 方法可以收集所有信息并最终返回真实的 1x1 gif 图像：

private static final byte[] GIF = {
    71, 73, 70, 56, 57, 97, 1, 0, 1, 0, -16, 0, 0, 0, 0, 0, 0, 0, 0, 33, -7,
    4, 1, 0, 0, 0, 0, 44, 0, 0, 0, 0, 1, 0, 1, 0, 0, 2, 2, 68, 1, 0, 59
};

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Gather JS-collected parameters.
    String requestURI = request.getParameter("requestURI");
    String referrer = request.getParameter("referrer");
    String resolution = request.getParameter("resolution");
    String colorDepth = request.getParameter("colorDepth");
    // ...

    // Gather server-collected parameters.
    String remoteAddr = request.getRemoteAddr();
    String userAgent = request.getHeader("user-agent");
    // ...

    // Send 1x1 transparent gif (and disable browser caching on it!)
    response.setHeader("Content-Type", "image/gif");
    response.setHeader("Cache-Control", "no-cache,no-store,must-revalidate");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
    response.getOutputStream().write(GIF);
}

Answer 2

假设您使用 PHP 执行此操作：

文件：api.js.php

<?php

    // get user ip and do something with it
    $ip = $_SERVER['REMOTE_ADDR'];

    // since we're in a PHP file, we need to tell the client it's actually JS
    header('Content-Type: application/javascript',true);

?>

// your regular JS folows here
alert('Hi there');

Answer 3

您可以只放置一个像这样的图像标签

<img href="yourserver.com/the-servlet-path" />

并根据该请求提供图像
那么你不需要分发脚本，

有关请求用户的信息都在 servlet api 中