7 JavaScript Differences Between Firefox & IE

Although the days of long and tedious code branches to target specific browsers in JavaScript are over, once in a while it’s still necessary to do some simple code branching and object detection to ensure that a certain piece of code is working properly on a user’s machine.

In this article, I’ll outine 7 areas where Internet Explorer and Firefox differ in JavaScript syntax.

1. The CSS “float” property

The basic syntax for accessing a specific css property for any given object is object.style.property, using camel casing to replace a hyphenated property. For example, to access the background-color property of a

whose ID is “header”, we would use the following syntax:

1. document.getElementById("header").style.backgroundColor= "#ccc";
   

But since the word “float” is already reserved for use in JavaScript, we cannot access the “float” property using object.style.float. Here is how we do it in the two browsers:

The IE Syntax:

1. document.getElementById("header").style.styleFloat = "left";
   

The Firefox Syntax:

1. document.getElementById("header").style.cssFloat = "left";
   

2. The Computed Style of an Element

JavaScript can easily access and modify CSS styles that have been set on objects using the object.style.property syntax outlined above. But the limitation of that syntax is that it can only retrieve styles that have been set inline in the HTML or styles that have been set directly by JavaScript. The style object does not access styles set using an external stylesheet. In order to access an object’s “computed style”, we use the following code:

The IE Syntax:

1. var myObject = document.getElementById("header");
2. var myStyle = myObject.currentStyle.backgroundColor;
   

The Firefox Syntax:

1. var myObject = document.getElementById("header");
2. var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
3. var myStyle = myComputedStyle.backgroundColor;
   

3. Accessing the “class” Attribute of an Element

As is the case with the “float” property, our two major browsers use different syntax to access this attribute in JavaScript.

The IE Syntax:

1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("className");
   

The Firefox Syntax:

1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("class");
   

This syntax would also apply using the setAttribute method.

4. Accessing the “for” Attribute of the Tag

Similar to number 3, we have different syntax to access a tag’s “for” attribute in JavaScript.

The IE Syntax:

1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("htmlFor");
   

The Firefox Syntax:

1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("for");
   

5. Getting the Cursor Position

It would be rare that you would want to find the cursor position of an element, but if for some reason you need to, the syntax is different in IE and Firefox. The code samples here are fairly basic, and normally would be part of a much more complex event handler, but they serve to illustrate the difference. Also, it should be noted that the result in IE will be different than that of Firefox, so this method is buggy. Usually, the difference can be compensated for by getting the “scrolling position” — but that’s a subject for another post!

The IE Syntax:

1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.clientX;
3. myCursorPosition[1] = event.clientY;
   

The Firefox Syntax:

1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.pageX;
3. myCursorPosition[1] = event.pageY;
   

6. Getting the Size of the Viewport, or Browser Window

Sometimes it’s necessary to find out the size of the browser’s available window space, usually called the “viewport”.

The IE Syntax:

1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = document.documentElement.clientWidth;
3. myBrowserSize[1] = document.documentElement.clientHeight;
   

The Firefox Syntax:

1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = window.innerWidth;
3. myBrowserSize[1] = window.innerHeight;
   

7. Alpha Transparency

Okay, this is not a JavaScript syntax issue — alpha transparency is set via CSS. But when objects fade in and out via JavaScript, this is done by accessing CSS alpha settings, usually inside of a loop. The CSS code that needs to be altered via JavaScript is as follows:

The IE Syntax:

1. #myElement {
2. filter: alpha(opacity=50);
3. }
   

The Firefox Syntax:

1. #myElement {
2. opacity: 0.5;
3. }
   

So, to access those values via JavaScript, we would use the style object:

The IE Syntax:

1. var myObject = document.getElementById("myElement");
2. myObject.style.filter = "alpha(opacity=80)";
   

The Firefox Syntax:

1. var myObject = document.getElementById("myElement");
2. myObject.style.opacity = "0.5";
   

Of course, as mentioned, normally the opacity/alpha would be changed in the midst of a loop, to create the animating effect, but this simple example clearly illustrates how it’s done.

网站迁移的最佳方法

转载自：http://www.googlechinawebmaster.com/2008/05/blog-post.html

您正在计划为自己的网站更换新的域名吗？很多网站管理员发现这真是一个繁琐的过程。究竟怎样做才能不影响网站在谷歌搜索结果中的表现呢？
您希望这种迁移对于用户来说是毫无察觉地发生的，同时希望谷歌知道新页面应该与原网站页面得到相同的质量认可。当您迁移网站时，那些讨厌的404错误提示（无法找到文件） 不仅会伤害用户体验，还会给您的网站在谷歌搜索结果中的表现带来负面影响。

本文将介绍如何稳妥地将您的网站搬到一个新域名(例如从www.example.com变为www.example.org)。这与将网站搬到一个新的IP地址是不同的，如果想了解这方面的内容请阅读此文。

网站迁移的主要步骤如下：

• 首先通过移动一个目录或子域名的内容来测试整个网站的迁移过程。然后使用301重定向功能将原有网站网页重定向到您的新网站上。通过此方法可告知谷歌和其它搜索引擎：您的网站已经永久性地迁移了。

• 上述操作完成后，查看一下您新网站里的网页能否出现在谷歌的搜索结果里。如果您对这次小范围的迁移感到满意，就可以迁移整个网站了。请不要将旧网站中所有网页的流量都重定向到您的新主页上，这种一刀切式的重定向虽然会避免404错误，但它并不能为用户提供良好的体验。尽管页对页的重定向（旧网站中每一网页都重新定向到新网站的相应网页上）会带来更大的工作量，但这也会给您的用户带来更连贯和明晰的体验。如果在新旧网站中不是一对一的页面匹配，那么一定要努力确保旧网站中每一个网页至少要重定向到具有类似内容的新网页上。

• 如果网站因为要重新命名或重新设计而需变更域名，您可以分两个阶段进行：第一阶段，移动您的网站；第二阶段，开始重新设计。这样做，不仅可以掌控用户在每一阶段中感受到的变化幅度，而且可以使整个过程变得更顺利。把变化控制在最低限度可以使您更容易发现和解决各种意外情况。

• 检查您网站网页的内、外部链接。理想的情况是您应该联络每个链接到您网站上的其他网站的管理员，让他们把链接指向您新域名的相应网页。如果这难以实现，您要确保原网站中所有含有其他网站链接指向的网页都被重定向到您的新网站上。您也应该检查并更新所有旧网站里的内部链接，使它们指向新域名。当您的网站内容已经在新服务器上准备就绪后，您可以使用一个诸如Xenu的链接检查工具来确认在您的新站点上没有遗留的故障链接。这一点特别重要，如果您的原始内容包含绝对链接（如www.example.com/cooking/recipes/chocolatecake.html ）而不是相对链接（如 …/recipes/chocolatecake.html）的话。

• 为防止混淆和混乱，您最好继续持有对原网站域名的控制权限至少180天。

• 将您的新网站添加到网站管理员工具帐户中，并验证您对该网站的所有权。创建并提交一个Sitemap以显示出新网站的所有URL，这样谷歌就会知道您新网站里的内容现在已经可用，可以对其进行抓取了。

• 最后，确保您的新、旧网站都在网站管理员工具中得到验证，并定期检查抓取错误，确保来自旧网站的301重定向工作正常，同时新网站上也不会显示我们不想看到的404错误提示。
  

我们承认，迁移从来就不是一件容易的事 —— 但是，这些步骤能帮助您确保原有网站的良好声誉在迁移的过程中不受损失。