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

Question

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

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

两种方法：

使用重定向（如果允许并且组件是一个 iFrame，这样 parent 页面就不会重新加载）

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

没有重定向

所以，我想的方法是有一个组件，在 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')); 来获取请求的数据，或者如果您将 Node.js 与 Express 和 the body-parser module.[=22= 一起使用，则可以使用 var data = req.body; ]

这里最好的部分是 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);
  }
}

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

Get the js script from a rest api hit and execute it on browser

html

javascript

ajax

rest

两种方法：