从 rest api 命中获取 js 脚本并在浏览器上执行它

Question

当他访问我们基于浏览器的应用程序时，我需要在幕后获取用户详细信息。所以需要创建一个即插即用的 JavaScript 组件，它可以很容易地嵌入到网页的标题中。捕获数据点的逻辑应该位于服务器端。因此，可以从此组件调用 API，然后可以在该 API 中利用“User-Agent”标头来获取数据点。

但是，并非所有数据点都可以从 User-Agent 中识别出来，例如语言、屏幕分辨率、颜色深度等。捕获这些属性需要在客户端执行 JavaScript。

两种方法：

1. 使用重定向（如果允许且组件是 iFrame，则不会重新加载父页面）

当组件最初加载时，将其重定向到另一个页面，该页面将包含将捕获这些详细信息的 JavaScript，它将自动提交并发送到将使用数据点的 API，然后重定向到带有标志的组件不再执行捕获活动。

1. 无重定向

因此，我正在考虑的方法是有一个组件，在该组件中，在 onLoad 事件期间，将调用 API，并将 JavaScript 代码（从客户端捕获数据点）作为响应返回。然后这个返回的 JavaScript 将在客户端执行，结果将保存在隐藏字段中。在这个组件中会有一个允许按钮（需要用户同意的一部分），当点击它时，隐藏字段中的数据将被提交给 API。

请查看该方法，如果它听起来不错且可行，请告诉我。

Answer 1

我敢打赌，第二种方法会更好。更棒的是，您实际上不需要编写专门的 API 来生成跟踪所需的 JS 文件。

现在，编写一个简单的 JavaScript 文件来收集所需的数据。我将其命名为 track.js。

function collectAndSubmit(){
  var data = {};
  
  // Then collect the required data
  data.screenWidth = window.innerWidth;
  data.screenHeight = window.innerHeight;
  data.preferredLanguages = navigator.languages; // In the form of an array

  // Submit the data through XHR
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/track.php");
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); // Note that we're sending a JSON request
  xhr.send(JSON.stringify(data));
}

最后 6 行代码会将所有收集到的数据以 JSON 格式发送到服务器。但是，我不知道您使用的是哪个服务器（例如 PHP、Node.js），因为它们有不同的方式来解析 JSON 数据。例如，PHP 你可以使用$data = json_decode(file_get_contents('php://input')); 来获取请求的数据，或者var data = req.body; 如果你使用带有Express 的Node.js 和the body-parser module。

这里最好的部分是 track.js 不必由 api 生成，例如通过对/gettrackingscript 执行 GET 请求。相反，您可以将其作为静态文件提供，将其放在您的 CDN 上等等。

现在，下载这个 track.js 文件的最佳方法是什么？好吧，这取决于您将如何使用它。您可以在页面加载时简单地包含一个<script src="track.js"> 标记，并在您想要发送数据时调用collectAndSubmit() 方法。或者通过另一个XMLHttpRequest 获取脚本并使用eval() 执行它们。

由于您计划在发送完所有数据后重定向用户，因此您不必刷新页面，除非您在构建时坚持使用 MVC（模式-视图-控制器）模式地点。在xhr.send() 之后，您可以将后端服务器设置为通过发送 HTTP 响应将附加数据发送回浏览器，您可以在此处使用以下命令对其进行解析：

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    // Assuming that you're using JSON
    var additionalData = JSON.parse(xhr.responseText);
  }
}