检查用户是否阻止了 3rd 方域

2022-01-24 00:00:00 blocking jquery javascript coffeescript client-side

我遇到了一个问题，我们的很多支持电话都是关于我们的图像没有加载的，因为用户阻止了 amazon s3 或类似的第 3 方服务.我使用 3rd 方服务来托管图像、视频和一些 javascript.有没有办法通过 javascript 检测客户端是否阻止了域，以便我们显示消息而不是让用户联系支持?

I have run into an issue where a lot of our support calls are about our images not loading because the user is blocking amazon s3 or a similar 3rd party service. I use 3rd party services for hosting images, video, and some javascript. Is there a way to detect through javascript if a client is blocking a domain so that we display a message instead of having the user contact support?

$.ajax 'http://aws.amazon.com/s3/',
  type: 'GET',
  dataType: 'html'
  complete: (e, xhr, settings) ->
    if e.status == 200
      console.log "Not Blocking S3"
    else
      console.log "Blocking S3"

根据我尝试过的评论，但它仍然无法正常工作.当我没有阻塞时，它会返回阻塞.

Based on the comments I made an attempt at it, but it is still not working. It returns blocking when I have no blocks.

上面的示例咖啡脚本代码不起作用，因为我认为会发生安全错误，因为它在不同的域上执行 ajax.Firebug 将请求显示为红色，但显示为 200.e.status 返回 0.

The above example coffeescript code does not work as I believe a security error occurs because it is doing an ajax on a different domain. Firebug shows the request in red, but says 200. e.status is returning 0.

推荐答案

从您要检查的域中加载图像.

Load an image from the domain you want to check against.

<img id="checkImg" src="https://www.google.com/images/srpr/logo3w.pngAAA" />

只是一个常规的图像标签(注意末尾的 AAA 使其不工作).然后你可以检查图像的宽度，看看它是否加载.

​ Just a regular image tag (notice the AAA at the end to make it not work). Then you can check the width of the image to see if it loaded or not.

if(document.getElementById('checkImg').clientWidth != 275)
    alert("Error")

Google 徽标的宽度为 275 像素，但错误图片(至少在 Chrome 中)只有 18 像素.所以如果图片不是 275px 宽，我知道它没有加载.

The Google logo is 275px wide but the error image (in Chrome at least) is only 18px. So if the image is not 275px wide, I know it did not load.

演示

相关文章