25

我正在尝试检测我的处理自定义协议的应用程序是否已安装并使用不同的浏览器工作。我查看了该站点上的其他问题，例如： 如何检测浏览器的协议处理程序？，并查看了这样的资源，以使其在大多数浏览器中的大多数平台上都能正常工作。

在将其标记为重复之前，请听我说...

我能够让我的功能在 Windows 8+ 上的 Chrome 之外的所有设备上运行。我不能像在 Windows 7 上那样在 Chrome 上使用窗口焦点方法，因为它会弹出要求我在商店中查找应用程序的消息。

有什么方法（缺少扩展）可以在 Chrome 上的 Windows 8+ 中检测自定义协议处理程序？

更新：

使用 onBlur 检测它仅适用于 Windows 7，因为在 8+ 中，如果它没有找到可以打开您的协议的内容，它会打开“从应用商店查找内容”对话框，这会使浏览器失去焦点。

4

2 回答 2

2

嘿，我认为你在正确的轨道上。这绝对不是那么容易，但到目前为止，chrome 并不是我的问题，更像是 Edge + IE，但我的解决方案是假设它们不支持该协议，如果出现任何故障或者它们有时无法正确响应。

模糊/焦点是需要检查的，但您需要结合可见性变化来检查它。HTML5 Visiblity API 和这篇关于它的帖子帮助我找到了一个非常可靠的解决方案，除了上面提到的浏览器，因为它们在navigator.msLaunchUri函数方面存在一些问题，并且实现了自己的方法，不依赖于模糊/焦点. 但是该功能存在错误，并且始终无法正确响应。

你可以在这里找到我的 codepen 。希望这对您有所帮助，即使答案有点晚了。这也适用于移动浏览器，但我没有测试多个尚未适用于我的 Android 6.0.2。从长远来看可能需要一些调整，但我认为它非常可靠。

(function() {
  var noProtocolHash = '#protocolXYnotsupported',
      checkDelay = 800, // apps might start slowly
      isBlurred = false,
      inCheck = false,
      inLauncherCheck = false,

  tabVisible = (function(){ 
      var stateKey, 
          eventKey, 
          keys = {
                  hidden: "visibilitychange",
                  webkitHidden: "webkitvisibilitychange",
                  mozHidden: "mozvisibilitychange",
                  msHidden: "msvisibilitychange"
      };
      for (stateKey in keys) {
          if (stateKey in document) {
              eventKey = keys[stateKey];
              break;
          }
      }
      return function(c) {
          if (c) document.addEventListener(eventKey, c);
          return !document[stateKey];
      }
  })(),

  isMSIE = function(){
    var rv = -1;

    if(navigator.appName == 'Microsoft Internet Explorer'){
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if(re.exec(ua) != null){
        rv = parseFloat(RegExp.$1);
      }
    }
    else if(navigator.appName == 'Netscape'){
      var ua = navigator.userAgent;
      var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
      if(re.exec(ua) != null){
        rv = parseFloat(RegExp.$1);
      }
    }
    return (rv !== -1)? true: false;
  },

  isEdge = function(){
    return window.navigator.userAgent.indexOf("Edge") > -1;
  },

  checkIfFocusLost = function($el){
    try {
      document.location.href = $el.attr("href");
    } catch (ex) {
        document.location.href = document.location.href + '/' + noProtocolHash;
    }

    setTimeout(checkVisibility, checkDelay);
  },

  checkVisibility = function(){
    if(tabVisible() && !isBlurred){
      handleNoProtocol();
    }
    else {
      handleProtocol();
    }
  },

  handleNoProtocol = function(){
    $('.result').text('has no protocol');

    inLauncherCheck = false;
  },

  handleProtocol = function(){
    $('.result').text('has the protocol');

    inLauncherCheck = false;
  },

  checkHash = function(){
    if(document.location.hash === noProtocolHash){
      handleNoProtocol();
    }
  },

  checkLauncherProtocol = function($el){
    inLauncherCheck = true;

    navigator.msLaunchUri($el.attr("href"), function(){
      handleProtocol();
    }, 
    function(){
      handleNoProtocol();
    });

    setTimeout(function(){
      // fallback when edge is not responding correctly
      if(inLauncherCheck === true){
        handleNoProtocol();
      }
    }, 500);
  },

  checkIfHasProtocol = function($el){
    inCheck = true;

    if(isEdge() || isMSIE()){
      checkLauncherProtocol($el);
    }
    else {
      checkIfFocusLost($el)
    }
  };

  checkHash();
  tabVisible(function(){
    if(tabVisible() && inCheck){
      handleProtocol();
      inCheck = false;
    }    
  });

  window.addEventListener("blur", function(){
    isBlurred = true;   
  });

  window.addEventListener("focus", function(){
    isBlurred = false; 
    inCheck = false;
  });

  window.checkIfHasProtocol = checkIfHasProtocol;
})();

$('.protocol').click(function(e) {
  checkIfHasProtocol($(this));
  e.preventDefault();
});

我的代码使用 Win10 测试：Chrome、Firefox、IE11、Edge + Android：Chrome (6.0.1)

还有这个 github 项目https://github.com/ismailhabib/custom-protocol-detection，它有一个类似的方法，可能维护得更多一些，但由于某些原因我无法让他们的解决方案工作，但也许这正是你需要什么。

于 2016-11-18T19:43:00.407 回答
-1

我认为这可能会对您使用不同的浏览器有所帮助，但请更好地定义您的问题或添加至少一些示例以使其清楚。

于 2015-03-27T12:20:24.710 回答