javascript - 内容出现在 Firefox 中，但不出现在 Chrome 中

Question

我目前正在研究一个搜索引擎。我实现了一项功能，用户可以选择在用户工作的浏览器中将搜索引擎设置为默认搜索引擎。

现在，我在一种类型的框中实现了此功能，每当用户重定向到搜索引擎站点时，该框就会出现在右侧底部，并带有选项。

令我震惊的问题是，该框仅出现在 Firefox 浏览器中。但在 chrome/chromium 浏览器中却没有。

$(document).ready(function() {
  var isFirefox = typeof InstallTrigger !== 'undefined';

  if (isFirefox === false) {
    $("#set-susper-default").remove();
    $(".input-group-btn").addClass("align-search-btn");
    $("#navbar-search").addClass("align-navsearch-btn");
  }

  if (window.external && window.external.IsSearchProviderInstalled) {
    var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com");

    if (!isInstalled) {
      $("#set-susper-default").show();
    }
  }

  $("#install-susper").on("click", function() {
    window.external.AddSearchProvider("http://susper.com/susper.xml");
  });

  $("#cancel-installation").on("click", function() {
    $("#set-susper-default").remove();
  });
});

#set-susper-default {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: fixed;
  right: 10px;
  bottom: 60px;
  background-clip: padding-box;
  display: block;
}

#set-susper-default h3 {
  margin: 0;
  padding: 8px;
  text-align: center;
  background-color: #26547c;
  color: white;
}

#set-susper-default ol {
  font-size: 15px;
  background-color: white;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

#set-susper-default button {
  background-color: #26547c;
  border: none;
  color: white;
  font-size: 15px;
  padding: 3px;
}

#set-susper-default #cancel-installation {
  width: 100%;
}

#set-susper-default #install-susper {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="set-susper-default">
  <h3>Set Susper as your default search engine on Mozilla!</h3>
  <ol>
    <!-- Start ignoring BootLintBear -->
    <li><button id="install-susper">Install susper</button></li>
    <li>Mark the checkbox to set Susper as your default search engine</li>
    <li>Start searching!</li>
  </ol>
  <button id="cancel-installation">Cancel</button>
</div>
<!-- Stop ignoring BootLintBear -->
<div id="search-bar">
  <app-search-bar></app-search-bar>
</div>

Answer 1

请在脚本代码中注释您的初始行。将您的脚本替换为适合我的脚本:

$(document).ready(function () {
        //var isFirefox = typeof InstallTrigger !== 'undefined';

        //if (isFirefox === false) {
        //    $("#set-susper-default").remove();
        //    $(".input-group-btn").addClass("align-search-btn");
        //    $("#navbar-search").addClass("align-navsearch-btn");
        //}

        if (window.external && window.external.IsSearchProviderInstalled) {
            var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com");

            if (!isInstalled) {
                $("#set-susper-default").show();
            }
        }

        $("#install-susper").on("click", function () {
            window.external.AddSearchProvider("http://susper.com   /susper.xml");
        });

        $("#cancel-installation").on("click", function () {
            $("#set-susper-default").remove();
        });
    });