如何编写适合FireFox的对话框？

在设计博客操作流程时，我们决定采用弹出对话框的方式来实现添加页面和修改页面的功能。用户在进行添加或修改操作后，只需点击提交按钮，对话框便会关闭，同时列表窗口会自动刷新，这样的界面让人感觉就像在使用Windows的界面程序一样，用户体验非常友好。

在实际操作过程中我们遇到了一个问题。IE浏览器的对话框技术并不被FireFox支持，我们需要找到一种方法让对话框能够在两种浏览器中都正常工作。幸运的是，在研究TinyMCE时，我们发现了一种支持FireFox的对话框技术，可以为我们所用。

我们的打开对话框的函数设计如下：

function popupDialog(url, width, height) {

//以下代码对IE有效，现在不再使用

//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;

//showy = event.screenY - event.offsetY -168; // + deltaY;

```css

var x = parseInt(screen.width / 2.0) - (width / 2.0);

var y = parseInt(screen.height / 2.0) - (height / 2.0);

var isMSIE = (navigator.appName == "Microsoft Inter Explorer"); //判断浏览器

if (isMSIE) {

retval = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; dialogLeft:" + x + "px; dialogTop:" + y + "px; status:no; directories:yes;scrollbars:no;Resizable=no;");

} else {

var win = window.open(url, "mcePopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes, + width + ", + height + ",resizable=no");

eval('try { win.resizeTo(width, height); } catch(e) { }');

win.focus();

}

```

在被打开的对话框里，我们采用了上下分Frame的页面设计。因为在IE浏览器中，单纯的对话框是无法提交的，通过分割成Frame，我们可以实现提交功能。这种设计使得对话框在保持简洁明了的也能满足用户在两种浏览器中进行提交操作的需求。这样的设计既保证了操作的便捷性，又提升了用户体验。在提交按钮上嵌入这段代码，它将根据浏览器的不同执行不同的操作。让我们深入了解这段代码的功能和背后的故事。

在前端开发中，我们时常遇到兼容性问题，尤其是在处理浏览器之间的差异时。以下是关于IE浏览器和Firefox浏览器在处理对话框方面的差异，以及如何解决这些差异的示例代码。

让我们关注这段代码的核心功能：重新加载页面。这个功能是通过 `doReload` 函数实现的。这个函数首先检测用户使用的浏览器是否为Microsoft Internet Explorer（IE）。如果是IE浏览器，它会使用 `parent.dialogArguments.location.reload()` 来刷新页面；否则，对于其他浏览器（如Firefox），它会使用 `parent.opener.document.location.reload()`。这种差异化的处理方式是为了确保代码在各种浏览器中都能正常工作。

接下来，让我们看看对话框的打开方式。IE浏览器使用 `window.showModalDialog` 方法打开对话框，而Firefox则使用 `window.open` 方法。这两种方法都允许我们设置对话框的各种属性，如大小、位置、滚动条等。需要注意的是，Firefox似乎不支持对话框的 `window.close()` 方法来关闭窗口。代码中使用了 `.close()` 方法，这个方法在IE和Firefox中都有效。

还有一个重要的注意点：在关闭窗口时，IE和Firefox的处理方式也不同。IE使用 `parent.dialogArguments.location.reload()` 来刷新页面或关闭对话框，而Firefox则使用 `parent.opener.document.location.reload()`。这里的 `reload()` 方法不仅可以刷新页面内容，还可以关闭对话框窗口。这是因为在IE中，对话框是作为模态窗口打开的，关闭对话框等同于刷新页面；而在Firefox中，对话框是作为一个单独的窗口打开的，因此需要刷新打开该窗口的父页面来关闭对话框。同时使用了 `.close()` 方法确保对话框能够正常关闭。无论是哪种浏览器，我们都希望能够确保用户的体验是一致的。编写兼容性代码以确保各种浏览器的平滑体验是一个重要挑战，但同时也充满了学习的乐趣。尽管现代浏览器之间的差异逐渐减少，但理解这些差异仍然有助于我们更好地优化和改进用户体验。