关于Firefox、Safari 与IE区别实际应用的一点心得

l转自：http://blog.csdn.net/zhou331209/archive/2009/12/22/5053386.aspx

 

 

最近接触到一个项目，功能也不是很复杂，刚开始是在IE下测试通过，后来客户用了一段时间，反馈说FireFox下某些功能用不了，后来又有客户反馈说Safari也用不了，这就引发了我对这块某些特性的研究的兴趣，后来项目在这三个浏览器下都可以运行，总的来说，还是有点心得，和大家分享下。

  1、关于上传的问题

一般情况下，我们会在需要上传的界面的Form中加这么一个东西（enctype="multipart/form-data"），如：

 

 <form id="form1" runat="server" enctype="multipart/form-data">

 

   enctype在Firefox和IE中，都是好的，不会有问题，但在Safari中，就会出大问题，加了这个后，页面的状态很有可能丢失掉，导致页面只要有回传或触发的时候，Page.IsPostBack = false，页面的功能将失效，所以，建议大家Form中最好不要加enctype="multipart/form-data"。

  那这又引发了另外一个问题，既然enctype不能用，那么不是有可能不能完整的传递文件数据了吗？这里，我给大家推荐一个后台方法：

有些时候，我们在后台获取文件的时候喜欢用这个方法：

 

UploadFile uploadFile = new UploadFile(FilePath);

 

用这个方法的话，在Firefox和IE中也不会有问题，在Safari中，出问题了，uploadFile 等于null,所以，我给大家推荐的方法是，我们后台获取文件的时候用另外的下面的方法：

 

for (int i = 0; i < Request.Files.Count; i++)
{
    if (Request.Files[i].ContentLength > 0)
     {

     }

}

 

Request.Files[i]就是获取到得文件，这个方法，在Firefox、Safari 、IE中都可以得到文件。

 

2、关于window.showModalDialog的问题

 

window.showModalDialog的功能是打开一个模态窗口，我们可以通过这个方法获取弹出界面的返回值，如：

 

var win = window.showModalDialog("test.aspx", window, "dialogWidth=500px;dialogHeight=150px;status=0;scroll=no");

 

但这个方法只是支持IE，Firefox完全不支持（Firefox中连界面都不会弹出），虽然目前Safari 中showModalDialog可以弹出界面，但返回值在父页面时获取不到，因此，尽量避免使用window.showModalDialog，如果实在万不得已要在Firefox中使用弹出窗口的话，我可以给朋友们提供一个解决方案，是用JavaScript写的一个模拟弹出界面的一个窗口，可以获取到返回值，鉴于代码有点多，需要的朋友可以留言给我，我可以发个demo过去。

 

3、关于innerText的问题

 

比如我界面上有个Label,如：

 

<asp:Label ID="labMessage" runat="server"></asp:Label>

 

一般我们在IE里面，如果想通过前台JavaScript给Label 的Text赋值的话，我们可以用如下方法：

 

var labMessage = document.getElementById("labMessage");

labMessage .innerText = "123";

 

但这种方法在Firefox下就不行了，Firefox虽然脚本不会报错，而且如果通过调试的话我们也可以发现labMessage .innerText 确实也是"123",但在界面上我们看到的labMessage的text却是空白，因此，在 Firefox下，我们要改用其它的方法，方法如下：

 

var labMessage = document.getElementById("labMessage");

labMessage .textContent= "123";

 

我们把innerText 换成了textContent，这样，在Firefox中，也可以用了。

我们还可以把方法改进下，使其兼容IE，和Firefox：

 

var labMessage = document.getElementById("labMessage");

 

if (navigator.appName.indexOf("Explorer") > -1)

{

   labMessage.innerText = message;

 

}

 

else

{

   labMessage.textContent = message;
 

}

这种方法，Safari中同样适用。

 

4、关于defaultbutton的问题

 

有时候，我们会给页面加一个默认按钮，只要每次按下enter键的时候，我们就触发这个按钮的事件，如：

 

<form id="form1" runat="server" defaultbutton="btnSave">

 

但这种方法也只有在IE中可以起到作用，Firefox、Safari 都不支持，因此，网上搜索了下，如下方案可以解决这个问题：

（1）、创建一个JS文件，如：DefaultButton.js；

（2）、打开DefaultButton.js，里面写入如下代码：

var __defaultFired = false;
function WebForm_FireDefaultButton(event, target) {
    var element = event.target || event.srcElement;
    if (!__defaultFired && event.keyCode == 13 && !(element && (element.tagName.toLowerCase() == "textarea"))) {
        var defaultButton;
        if (__nonMSDOMBrowser)
            defaultButton = document.getElementById(target);
        else defaultButton = document.all[target];
        if (defaultButton) {
            if (typeof (defaultButton.click) != "undefined")
                defaultButton.click();
            else
                eval(unescape(defaultButton.href.replace("javascript:", "")));
            event.cancelBubble = true;
            if (event.stopPropagation)
                event.stopPropagation();
            return false;
        }
    }
    return true;
}
（3）、在页面的PageLoad事件里注册DefaultButton.js里的脚本：
 protected void Page_Load(object sender, EventArgs e)
 {
     ClientScript.RegisterClientScriptInclude("js1", "DefaultButton.js");

     //自己的代码

     ...

     ...
 }

上述步骤完成后

<form id="form1" runat="server" defaultbutton="btnSave">

此时，Firefox、Safari 对defaultbutton也支持。

 

目前暂时就整理了上述几点，有时间再多整理点。

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhou331209/archive/2009/12/22/5053386.aspx