Question

我希望能够在用户浏览Twitter应用内的网页时检测用户。通过检测，我想添加一个body类，我将用它来改变页面在twitter app中查找用户的方式。但是，到目前为止我所有的尝试都失败了。

我可以使用以下代码检测Facebook应用内的webview

var ua = navigator.userAgent;
if ((ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1)) {
  return 'facebook';
}

我环顾四周/搜索其他StackOverflow解决方案。但是，我找不到可以在应用程序中检测twitter的解决方案。也就是说，我想检测用户何时在twitter app中浏览页面。

我尝试过但失败的事情在

之下

   if (/Twitter for/i.test(nua) === true) {
      return 'twitter';
   }

或

if (/\/\/t.co\//i.test(document.referrer) === true && /Safari\//.test(nua) === false) {
  return 'twitter';
}

或检查浏览器，设备，供应商，型号，设备类型，引擎，操作系统，操作系统版本（为什么我要检查这个？！？）。我用Modernizr检查过;但是，作为独立的Safari和应用内Twitter之间没有发现任何差异。另外，使用Detect if user is using webview for android/iOS or a regular browser

进行检查

还尝试了以下失败

   var userAgent = window.navigator.userAgent.toLowerCase(),
      safari = /safari/.test( userAgent ),
      ios = /iphone|ipod|ipad/.test( userAgent );

var standalone = window.navigator.standalone,
  userAgent = window.navigator.userAgent.toLowerCase(),
  safari = /safari/.test( userAgent ),
  ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
  if ( safari ) {
    $('.debug').prepend('Yeah I am a browser in ios');
  } else if ( !safari ) {
    $('.debug').prepend('Yeah I am a webview in ios');
  }
} else {
  $('.debug').prepend('Yeah I am NOT a ios');
}

if( ios ) {
  if ( !standalone && safari ) {
    $('.debug').prepend('Yeah I am a browser in ios');
  } else if ( standalone && !safari ) {
    $('.debug').prepend('Yeah I am a standaline in ios');
  } else if ( !standalone && !safari ) {
    $('.debug').prepend('Yeah I am WEBVIEW');
  }
} else {
  $('.debug').prepend('Yeah I am NOT IOS');
}

var isWebView = !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone'
$('.debug').prepend('<br>isWebView? : ' + isWebView + "<br>");
$('.debug').prepend('<br>AM I WEBVIEW?: ' + /AppName\/[0-9\.]+$/.test(navigator.userAgent));

var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
$('.debug').prepend('<br> is_uiwebview :' + is_uiwebview);
$('.debug').prepend('<br> is_safari_or_uiwebview :' + is_safari_or_uiwebview);


var uaSafari = navigator.userAgent.match(/Safari/i)
var uaSafariInput = navigator.userAgent.match(/Safari/i).input
var uaSafariIndex  = navigator.userAgent.match(/Safari/i).index
$('.debug').prepend('<br> ' + uaSafari + '<br>' + uaSafariInput + '<br>' + uaSafariIndex + '<br>' + navigator.vendor + '<br>' + navigator.product + '<br>' + navigator.productSub + '<br>' + navigator.languages.length + '<br>' + navigator.doNotTrack + '<br>' + navigator.maxTouchPoints + navigator.maxTouchPoints);

//Check headers and see if any difference there
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
$('.debug').prepend('<br> headers \t ' + headers);


if (/Twitter for/i.test(navigator.userAgent) === true) {
  $('.debug').prepend('<br> Test1 ');
}

$('.debug').prepend('<br> Document referrer is : '+ document.referrer + " <br> ");

if (/\/\/t.co\//i.test(document.referrer) === true && /Safari\//.test(navigator.userAgent) === false) {
  $('.debug').prepend('<br> Test2 ');
}
  }

Answer 1

我不相信可以在JavaScript中检测Twitter应用程序内浏览器，因为它使用的通用Web视图没有可识别的属性。

您的大多数示例都依赖于在用户代理字符串中搜索特定关键字。以下是基于我刚刚进行的测试，比较iOS 11 for iPad中相关浏览器之间的用户代理字符串：

<强> Safari浏览器

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5372a Safari/604.1

Facebook（应用内）

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Mobile/15A5372a [FBAN/FBIOS;FBAV/140.0.0.63.89;FBBV/70896504;FBDV/iPad4,2;FBMD/iPad;FBSN/iOS;FBSV/11.0;FBSS/2;FBCR/AT&T;FBID/tablet;FBLC/en_US;FBOP/5;FBRV/0]

推特（应用内）

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5372a Safari/604.1

您可以看到Twitter的浏览器用户代理与Safari完全相同。

显然，这不是解决问题的方法，而是解释为什么你没有找到实际答案。

Answer 2

您可以检查navigator.mediaDevices是否未定义。由于WebRTC不支持webRTC，因此在Twitter中未定义，但在Safari中存在。

Answer 3

Twitter使用t.co扭曲共享URL，因此在到达真实内容之前会进行重定向。

https://developer.twitter.com/en/docs/basics/tco

在检查从Twitter应用程序内浏览器发送的所有标头时，引荐标头字段会显示包装的t.co链接。

referer: http://t.co/ 0JG5Mcq

也许此标头可以帮助区分Safari的User-Agent。

如何在用户浏览应用内的Twitter时检测页面？

3 个答案: