Chrome 中的 Javascript 与 Firefox Mozilla 不兼容

Question

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

我试图在 JQuery 中复制这个搜索引擎，因为 jquery 使一切都相互兼容，但我在使用 each() 函数时遇到了一些问题。我是 JQuery 的新手。

逻辑是:

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

所以我将包含对国家/地区的引用的类“csc-firstheader”作为目标，并获取其父项的父项并使其 css 属性 display = 'none'

脚本如下

               <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 属性。

对于 Firefox(以及所有支持它的浏览器，因为这是标准的 W3C 属性)，您应该使用 textContent。您可以像这样检查两者:

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

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