JAVASCRIPT IE 与 FF 中兼容写法记录

狼蚁网站的SEO优化之路：高手的浏览器兼容写法

在网页开发中，浏览器兼容性是一个不可忽视的问题。特别是在使用JavaScript和CSS时，不同的浏览器可能会有不同的方式。针对狼蚁网站，一些SEO优化高手整理了在Internet Explorer（IE）和Firefox中的兼容写法。

让我们关注一个常见的问题：png透明。在IE中，我们常常使用AlphaImageLoader滤镜来处理png透明问题。而在Firefox中，则需要采用不同的方法。Firefox不支持innerText属性，但它支持textContent。在使用时需要注意替换或处理多余的空格。

对于网页内容的选取问题，IE和Firefox的处理方式也有所不同。在IE中，我们通常使用jsobj.onselectstart函数来禁止选取网页内容。而在Firefox中，则通过CSS的:-moz-user-select属性来实现。

在处理滤镜、事件、鼠标位置、DIV元素边界等问题时，IE和Firefox也存在差异。例如，透明滤镜的使用、事件的捕获、鼠标位置的获取以及DIV等元素的边界问题等等，都需要开发者特别注意。

针对这些问题，高手们提供了一系列的解决方案和判断方法。例如，通过判断document.all语法是否支持来判断浏览器类型；使用!important来优先使用css语句；在处理集合类对象时，统一使用[]获取等等。这些技巧对于提高网站的兼容性和用户体验具有重要意义。

狼蚁网站在SEO优化的过程中，需要考虑各种浏览器兼容性问题。通过采用这些高手整理的技巧和方法，可以确保网站在各种浏览器中的表现都能达到最佳状态，从而提升用户体验和网站的访问量。这不仅体现了开发者们的专业素养，也为狼蚁网站的长期发展奠定了坚实的基础。浏览器兼容性问题概览

在Web开发与设计中，不同的浏览器可能会存在各种各样的兼容性问题。针对这些问题，我们进行了一系列的梳理与解决方案。

自定义属性问题

在Internet Explorer（IE）中，可以通过获取常规属性的方法来获取自定义属性，使用getAttribute()同样可以达到目的。而在Firefox中，似乎更倾向使用getAttribute()来获取自定义属性。为了确保代码的兼容性和稳定性，选择统一通过getAttribute()来获取自定义属性是一个明智的选择。

eval("idName")问题

关于元素的ID获取，IE允许使用eval("idName")或getElementById("idName")。但在Firefox中，只能通过getElementById("idName")来获取。推荐统一使用getElementById("idName")来确保跨浏览器的兼容性。

变量名与HTML对象ID冲突问题

在IE中，HTML对象的ID可以直接作为document的下属对象变量名使用，而Firefox则不支持这种做法。为了避免混淆和错误，建议使用document.getElementById("idName")来代替直接使用HTML对象的ID作为变量名。声明变量时，加上var关键字可以避免产生歧义。

const关键字的使用问题

在Firefox中，可以使用const关键字或var关键字来定义常量，但IE只支持var。为了确保代码的兼容性，建议统一使用var关键字来定义常量。

input.type属性问题

window.event问题

window.event只在IE中有效，Firefox则无法识别。这是因为Firefox的event对象只在事件发生的现场有效。为了解决这个问题，可以在事件处理函数中接收event作为参数，并通过一些逻辑判断来确保event对象的可用性。例如：`var myEvent = evt ? evt : (window.event ? window.event : null);`。

event.x与event.y以及event.srcElement问题

不同的浏览器在处理事件对象属性时也存在差异。IE有x、y属性，而Firefox有pageX、pageY属性；对于srcElement和target属性也存在类似差异。为了确保代码的兼容性，可以通过一些逻辑判断来确保获取到正确的属性值。例如：`var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y : event.pageY;` 对于srcElement和target的处理也可以采用类似的方式。

window.location.href问题

不同版本的Firefox和IE对于window.location或window.location.href的使用也存在差异。为了确保代码的兼容性，可以使用window.location来代替window.location.href。可以考虑使用location.replace()方法来实现页面跳转或替换当前页面。

模态和非模态窗口问题

IE中的showModalDialog和showModelessDialog用于打开模态和非模态窗口，但Firefox不支持这两个方法。对于Firefox用户，可能需要寻找其他方法或插件来实现模态和非模态窗口的功能。

在网页开发中，我们经常需要打开新的浏览器窗口，这时可以使用 JavaScript 的 `window.open()` 方法来实现。例如，`window.open(pageURL, name, parameters)` 可以直接用来打开一个新的窗口。如果需要在子窗口中向父窗口传递参数，可以使用 `window.opener` 来访问父窗口。反之，若需要父窗口控制子窗口，可以通过 `var subWindow = window.open(pageURL, name, parameters)` 获取新开窗口的对象来实现。

在处理网页中的 frame 和 iframe 时，会遇到一些特定的问题。以狼蚁网站SEO优化的frame为例，我们可以使用 `` 来创建一个frame。在访问这个frame对象时，Internet Explorer（IE）使用 `window.frameId` 或 `window.frameName` 来访问，而Firefox则使用 `window.frameName`。为了解决这个问题，我们可以统一使用 `window.document.getElementById("frameId")` 来访问frame对象。

若要更改frame的内容，无论是IE还是Firefox，都可以使用 `window.document.getElementById("frameId").src = "x.html"` 或 `window.frameName.location = "x.html"`。若需要将frame中的参数传递回父窗口，可在frame中使用 `parent` 关键字。

在网页加载过程中，Firefox的body对象在body标签未完全读入时就已经存在，而IE则需要在body标签完全读入后才能访问。尽管这个问题尚未实际验证，但在实际开发中，我们可以采用一些策略来避免依赖这种浏览器行为差异。值得注意的是，在IE6、Opera9以及FireFox2中，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这些元素还未完全载入完成。

在处理事件委托方法时，IE和Firefox之间存在一些差异。在IE下，我们使用 `document.body.onload = inject;` 其中 `function inject()` 在这之前已被实现；而在Firefox下，我们需要使用 `document.body.onload = inject();` 为了解决这个问题，我们可以采用统一的方法，如 `document.body.onload=new Function("inject()");` 或者 `document.body.onload = function(){ / 这里是代码 / }`。通过这种方式，我们可以确保代码的兼容性和稳定性。对于特定的框架或库（如cambrian），我们可以调用其提供的渲染方法（如 `cambrian.render('body')`）来确保页面正确渲染和交互。