編寫將包含在其他網站中的js的正確方法是什么？

Question

我需要編寫一個腳本，我希望將其包含在不同的網站上（類似於您必須包含在網站頁面中的Google Analytics js）。

這個腳本必須發送給我的一個servlet（我正在使用java）一個請求。

在servlet中，我需要增加一些變量，然后將圖像返回給客戶端。 圖像將顯示在用戶訪問的網站上。

我還需要在servlet中獲取客戶端的信息（ip等）。 如果我使用getRemoteAddr（）方法，它會在這種情況下工作嗎？

此外，我需要跟蹤我向客戶端顯示的圖像。（我不知道應該在哪里，客戶端或服務器端）。

Whics是這樣做的正確方法嗎？

Answer 1

您的JS必須打印/附加<img>指向文檔的1x1透明GIF圖像。 JS收集的所有信息都可以作為圖像URL上的查詢字符串發送。 Google Analytics也做類似的事情 。

基本上：

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

有：

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>

在servlet的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中