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();
        });
    });

内容显示在Firefox中，但不显示在Chrome中

1 个答案: