Question

我创建了一个使用javascript而不是使用sql查询后端的搜索引擎。它在Chrome中运行良好，但它不适用于Firefox。我认为纯javascript将与所有导航器兼容。有人能告诉我哪个部分被firefox拒绝了。

我试图在JQuery中复制这个搜索引擎，因为jquery使所有东西都相互兼容，但我在使用each（）函数时遇到了一些麻烦。我是JQuery的新手。

逻辑是：

CMS会自动在页面上创建有关国家/地区相关文档的内容。自动生成的代码如下所示：

enter image description here

所以我的目标是课程＆＃34; csc-firstheader＆＃34;其中包含对国家/地区的引用，并获取其父母的父母并使其成为css属性display =＆＃39; none＆＃39;

脚本如下

               <script type="text/javascript">
               function filterByCountry(){
                 var inputField = document.getElementById('search-field');
                 var string = inputField.value;
                 if(string!=""){        
                  var headers =  document.getElementsByClassName('csc-firstHeader');
                  var errorMessage = document.getElementById('failure-message');
                        errorMessage.style.display = "none";
                  var exist=0;
                        for(var i=0;i<headers.length;i++){
                                if( headers[i].innerText.toLowerCase() !=                    string.toLowerCase() ){
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "none";
                                    header.style.position = "relative";
                                    header.style.top = "0px";
                                    header.style.left = "0px";
                                    header.style.width = "292px";
                                }
                                if( headers[i].innerText.toLowerCase() ==                                                          string.toLowerCase() ){
                                     exist=1;
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "inline-block";
                                    header.style.position = "absolute";
                                    header.style.top = "110px";
                                    header.style.left = "48px";
                                    header.style.width = "482px";

                                }
                        }
                    if(exist == 0){
                        errorMessage.style.display = "inline-block";
                    }
                    }

               </script>

搜索栏为：

                    <div id="search-container">
                        <input type="text" id="search-field"  placeholder="search a specific country" />
                        <button id="search-button" onclick="filterByCountry()" > Search </button>



                 </div>

JFiddle

http://jsfiddle.net/arj196/5RkLL/

Answer 1

Firefox不支持innerText属性。

您应该使用textContent代替Firefox（以及支持它的所有浏览器，因为这是标准的W3C属性）。你可以检查这两个：

var header = headers[i];
var headerText = header.textContent || header.innerText;
if( headerText.toLowerCase() == string.toLowerCase() ){

除此之外，我没有看到大多数主流浏览器不支持的任何其他功能或属性。作为参考，您可以查看浏览器上的错误控制台，它不起作用 - 它应该显示类似Cannot call function "toLowerCase" on undefined的内容。这告诉你innerText未定义。然后，您可以通过Google查看哪些浏览器支持该属性。

Chrome中的Javascript与Firefox Mozilla不兼容

1 个答案: