如何使用Javascript访问日志页面且不跳转离开当前页面

问题原因 #

你当前使用window.location.href触发页面跳转的方式来上报事件，自然会直接替换当前商品页，要实现无感后台上报，替换为异步HTTP请求即可。

解决方案 #

优先推荐用原生Fetch API实现，代码更简洁，修改log_event函数如下：

function log_event(id) {
  // 发起异步GET请求，不会触发页面跳转
  fetch(`https://example.com/log/cart.php?id=${encodeURIComponent(id)}`, {
    method: 'GET',
    // 加keepalive可避免页面意外关闭时请求被中断，适合上报类场景
    keepalive: true
  }).catch(err => {
    // 可选：上报出错的兜底处理，不影响用户正常操作
    console.error('事件上报失败', err);
  });
  return false;
}

服务端适配说明 #

如果你的线上商店域名和example.com不是同一个域名，需要在log/cart.php文件开头添加CORS头，避免浏览器跨域规则拦截请求：

<?php
// 替换为你实际的商店域名，比通配符*安全性更高
header('Access-Control-Allow-Origin: https://你的商店域名.com');
header('Access-Control-Allow-Methods: GET');
// 原有插入数据库的逻辑不变
...
?>

如果需要兼容IE等老旧浏览器，可改用XMLHttpRequest版本实现：

function log_event(id) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://example.com/log/cart.php?id=' + encodeURIComponent(id), true);
  xhr.send();
  xhr.onerror = function() {
    console.error('事件上报失败');
  };
  return false;
}

以上方案所有请求都在后台异步执行，不会触发页面跳转、也不需要新开标签窗口，用户会一直停留在商品页面，完全不影响正常操作。

内容的提问来源于stack exchange，提问作者bassicplays