BlogJava-josson.jin-随笔分类-web开发

firefox及ie不同版本间样式兼容性调试方法.

josson — Tue, 29 Jun 2010 03:03:00 GMT

最近一个项目主要涉及前端的交互优化，由于UED资源不足，所以一起做了一些前端的工作，

由于各浏览器的标准不一样，如要兼容像ie6,7,8及firefox，样式调整比较费事，现在css相关

的一些技巧分享一下，希望对大家有所帮助。

1、什么是css hack.

针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也

能得到我们想要的页面效果，这种针对不同的浏览器写不同的CSS code的过程，称之为CSS hack。

通过下表中的hack code就可以实现不同版本ie浏览器间的兼容：

hack code	ie6	ie7	firefox
_	√	×	×
*	√	√	×
!import	×	√	√

‘_’ : 只有ie6能识别_，如ie7,8下”width:100px; “的样式是OK，但ie6不够宽时，可以在”width:100px”后面增加一段”_width:105px;” 那么ie7,8不会解析_width:105px，但ie6会执行。

‘*’ : ie6,7都能识别*，但firefox不能识别；

‘!import’ : ie 6不能识别，ie7和ie8都能识别；

2、css调试工具

(1). ie8的调试工具，ie8下按F12能呼出开发人员开发工具，如下图：

选中图中的箭头鼠标按钮，在浏览器中选中需要优化的HTML对象，HTML窗口就会

定位到选中HTML对象的代码上(如上图左)，则右窗口中则显示当前对象的所有样式，

通过对右窗口中的样式调整，达到预期效果后，找到css文件的class，并作相同修

改。通过这个工具，修改样式后所见即所得，确定样式后再修改样式文件。

(2). Firebug，firefox下可以通过Firebug工具，来定位HTML对象并调试该对象的样式，如下图：

josson 2010-06-29 11:03 发表评论

Ie 8 的window.open打开新窗口无反应问题。

josson — Sat, 12 Sep 2009 07:01:00 GMT

因项目需要，实现系统对IE8的支持，安装了ie8版本。安装完后，发现一个奇怪问题，打开一个窗口(window.open方式)后，再打开时，新窗口的页面显示空白，无法加载其内容。关闭ie后，重新偿亦是如此，第一次能打开，第二次就不行。无论是ie7模式，还是兼容模式。

网上搜了很多内容，都没有找相应的解决方案。后来偿试了一下，ie设置重置（工具-Internet选项-高级-重置），删除所有个性化设置，完成后，重试后该问题不再出现，窗口能正常打开。回想，可能是装完ie后，ie设置向导中做了某些不当的设置有关，但具体是哪项尚不得而知。

josson 2009-09-12 15:01 发表评论

javascript - 网页窗口适应续

josson — Sat, 05 Sep 2009 10:15:00 GMT

在原网页窗口高度根据内容自适应的基础上，做了一些调整:
1、解决窗口底部靠近任务栏时，window.resizeBy 不能调整窗口高度问题；
1、增加宽度自适功能（注：只针对宽度不足，进行扩展的情况；无法调整窗口宽度比实际内容宽的情况）

Ext.util.ResizeWin = function() {
    try {
        var sh = document.documentElement.scrollHeight
            || document.body.scrollHeight;
        var ch = document.documentElement.clientHeight
            || document.body.clientHeight;
        var sw = document.documentElement.scrollWidth
            || document.body.scrollWidth
        var cw = document.documentElement.clientWidth
            || document.body.scrollWidth;

        var xHeight = 55;//任务栏高度(double).
        var statHeigth = 30;//状态栏高度
        var maxHeight = window.screen.height - xHeight; //最大可显示网页高度
        var wHeight = window.screenTop + sh + statHeigth;
        if(wHeight > maxHeight){
            //窗口位置过底时，向上移动若干象素，使窗口状态栏在任务栏上面.
            var newTop = (window.screenTop - xHeight) + (maxHeight - wHeight);
            if(newTop < 0) newTop = 0;
            window.moveTo(window.screenLeft, newTop);
        }
        //宽度调整时，实际内容不够宽可以适用，过宽无法调整.
        window.resizeBy((sw-cw),(sh-ch));
    }catch (e){}
};

以下从网上收集的一些相关资料：

1、关于网页窗口高、宽示意图:

2、更多属性：

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidt

josson 2009-09-05 18:15 发表评论

不同浏览器中网页内容高度取值

josson — Sun, 14 Jun 2009 08:48:00 GMT

关于浏览器的clientHeight、offsetHeight和scrollHeight

在IE、FireFox、Netscape等不同的浏览器里，对于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有着不同的含义，比较容易搞混，现整理一下相关的内容：

clientHeight：在上述浏览器中, clientHeight 的含义是一致的，定义为网页内容可视区域的高度，即在浏览器中可以看到网页内容的高度，通常是工具条以下到状态栏以上的整个区域高度，与具体的网页页面内容无关。可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。

offsetHeight：关于offsetHeight，ie和firefox等不同浏览中意义有所不同，需要加以区别。在ie中，offsetHeight 的取值为 clientHeight加上滚动条及边框的高度；而firefox、netscape中，其取值为是实际网页内容的高度，可能会小于clientHeight。

scrollHeight：scrollHeight都表示浏览器中网页内容的高度，但稍有区别。在ie里为实际网页内容的高度，可以小于 clientHeight；在firefox 中为网页内容高度，最小值等于 clientHeight，即网页实际内容比clientHeight时，取clientHeight。

clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同，不过是高度变成宽度而已。

若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话，可以通过设置DOCTYPE，启用不同的解析器，如：，设置DOCTYPE后，这三个属性都表示实际网页内容的高度。

通过以下HTML代码，可以了解一下这三个属性的含义：

DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional"> //设置DOCTYPE
<HTML>
<HEAD>
  <TITLE> 测试。 TITLE>
HEAD>
  <script type='text/javascript'>
  window.onload = function(){
    var ch = document.body.clientHeight;
    var sh = document.body.offsetHeight;
    var ssh = document.body.scrollHeight;
    alert('clientHeight:'+ch+'; offsetHeight:'+sh+"; scrollHeight:"+ssh);
  }
  script>
<BODY style='margin:0px'>
  <div style='background-color:#ccc; height:400px; padding:0px'>
     text
  div>
BODY>
HTML>

根据页面内容调整窗口高度的方法:

josson 2009-06-14 16:48 发表评论

实现Javascript文件压缩的批处理

josson — Thu, 19 Mar 2009 14:22:00 GMT

实现javascript文件压缩的批处理脚本，脚本完成的内容：
1、利用一个windows script 删除js文件中的空白字符及注释;
2、通过gzip.exe 将js文件压缩打包成gzjs文件。gzip.exe 下载地址：http://www.gzip.org
相关文件请下载附件：js 压缩批处理。

使用方法：
a. 双击运行 gzjs.bat ，提示输入javascript文件名(带路径).
b. 输入待压缩的js文件，或者拖动js文件到command窗口(可直接在eclipse视图中拖动js文件到cmd窗口)。
c. 回车后，在js文件所在目录会生成一个相同文件名的gzjs文件。

批处理文件内容如下：

@echo off

if not "%1" == "" (
   set JSFILE=%1
   goto ZIPING
)

:INPUT_FILENAME
set /P JSFILE=请输入待压缩的JS文件名:
if "%JSFILE%"=="" (
    echo ERROR: JS文件名称必须指定!
    goto INPUT_FILENAME
)

:ZIPING
set MINJS_FILENAME=c-ziped.js
if not exist %JSFILE% (
    echo ERROR: 文件:%JSFILE%不存在!
    goto INPUT_FILENAME
)

rem 压缩Javascript文件.
if exist %MINJS_FILENAME% del %MINJS_FILENAME%
CScript /nologo pack.wsf %JSFILE% >> %MINJS_FILENAME%
if not "%ERRORLEVEL%"=="0" (
    echo ERROR: JS文件压缩失败：%JSFILE%
    goto END
)

rem 打包js文件为.gzjs
gzip -9 %MINJS_FILENAME%
for %%i in ("%JSFILE%") do (
        set FILENAME=%%~ni
    set JS_FILEPATH=%%~di%%~pi
    rem echo %JS_FILEPATH%
)

rem 压缩文件名及重命名的文件名.
set GZIPED_FILE=%FILENAME%.gzjs
set TMP_GZIPED_FILE="%MINJS_FILENAME%.gz"

rem 重命名.
if exist %GZIPED_FILE% del %GZIPED_FILE%
call ren %TMP_GZIPED_FILE% %GZIPED_FILE%
if not "%ERRORLEVEL%"=="0" (
    echo ERROR: JS压缩文件打包失败：%TMP_GZIPED_FILE%
    goto END
)

rem 移动压缩文件到源目录.
set TARGET_GZJS=%JS_FILEPATH%%GZIPED_FILE%
call move /Y %GZIPED_FILE%  %TARGET_GZJS%
echo done. %TARGET_GZJS%

:END
pause

Apache配置，以支持gzjs文件格式(http header的Content-Encoding=gzip):

<FilesMatch "\.gzjs$">
Header add Content-Encoding gzip
FilesMatch>

josson 2009-03-19 22:22 发表评论

DWR 长连接方式的若干问题

josson — Mon, 31 Mar 2008 08:41:00 GMT

1、服务器向指定客户端推送数据

完成聊天室之类的项目时，利用DWR推模式向所有客户端推送数据，的确是很方便，只要客户端的访问页面确定就可以了。但是，若需要对访问同一页面的两个客户端（特别是根据用户身份作不同处理），加以区分，推送不同数据时，就没这么简单了。

有两种方式可以解决这个问题：
a)、服务端不处理，只管往客户端推送数据，由客户端对收到的数据进行过滤，然后再显示出来。但这种方式的缺点很明显，数据包多且不安全。
b)、对每个客户端进行单儿标识。DWR中以ScriptSession来代表一个客户端连接，我们可以通过设置ScriptSession的属性，来达到标识客户端的作用。如将sessionid或用户登录名保存在相应的ScriptSession属性中，向客户端推送数据时，根据这个属性加以过滤。相应的代码片段如下：

    /**
     * 返回有效的ScriptSession.
     * @param user
     * @return
     */
    @SuppressWarnings("unchecked")
    private ScriptSession getCurrentSession(String user){
        ScriptSession xSession = null;
        Collection<ScriptSession> sessions = new HashSet<ScriptSession>();
        sessions.addAll(sctx.getScriptSessionsByPage(PAGE_MAIN));
        for (ScriptSession session : sessions) {
            //查询与消息接收者相符的客户端页面,并输出消息内容
            String xuser = (String)session.getAttribute(SESSION_ATTRNAME_USER);
            if(xuser != null && xuser .equals(user)){
                xSession = session;
            }
        }
        return xSession;
    }

    /**
     * 清除已有连接, 标识当前连接用户(登录或刷新页面时，进行必要的清理).
     * @param user
     * @param session
     */
    private void cleanDwrConnection(user,ScriptSession session){
        String jid = StringUtils.parseBareAddress(user);
        ScriptSession oldSession = getCurrentSession(jid);
        if(oldSession != null && oldSession != session){
            oldSession.invalidate();
            oldSession = null;
        }

        session = WebContextFactory.get().getScriptSession();
        session.setAttribute(SESSION_ATTRNAME_USER, jid);
    }

2、使用DWR推模式的实现中，刷新页面引起长连接丢失问题

    最近在做web版即时消息客户端时，遇到这样一个问题：为了减少无用的服务连接，只在登录后才激活长连接（dwr.engine.setActiveReverseAjax(true)，注销后取消长连接）。登录客户端后，用了一段时间后，无法收消息了（消息无法推送到客户端）。后来调试后，发现ScriptSession实例没有绑定物理连接信息(conduits:m:root为空)。测试后发现，当刷新页面后，会产生一个新的ScriptSession实例，而这个ScriptSession的conduits:m:root为空，所以怎么都无法将数据推送到客户端去了。

    客户端激活长连接后(dwr.engine.setActiveReverseAjax(true);)，对应的ScriptSession实例会绑定物理连接信息，而刷新页面刷新而不重新激活长连接，新产生的ScriptSession是没有绑定物理连接信息的，一旦绑定物理连接信息的ScriptSession被销毁后，就产生了这个问题。

josson 2008-03-31 16:41 发表评论

IE与FireFox的兼容性问题

josson — Thu, 31 Jan 2008 04:52:00 GMT

window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)

鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。

鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
通用：event.clientY+document.documentElement.scrollTop（加垂直滚动条）。
通用：event.clientX+document.documentElement.scrollLeft（加水平滚动条）。

示例：

标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。

窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

添加事件
IE：element.attachEvent("onclick", func);。
FF：element.addEventListener("click", func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。

父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

画图
IE：VML。
FF：SVG。

CSS：透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。

CSS：双线凹凸边框
IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

josson 2008-01-31 12:52 发表评论

dhtmlxTree 使用示例

josson — Wed, 30 Jan 2008 07:53:00 GMT

http://dhtmlx.com 包含目录树、菜单、工具条等很多js控件，功能十分强大。

现将dhtmlxTree 使用样例记录如下(包括目录树、上下文菜单)：
1、所需js文件

dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js

//菜单控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js

2、sample.html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<script src="./dhtmlxcommon.js">script>
<script src="./dhtmlxtree.js">script>
<script language="JavaScript" src="./extend/dhtmlxtree_json.js">script>
<script language="JavaScript" src="./dhtmlxprotobar.js">script>
<script language="JavaScript" src="./dhtmlxmenubar.js">script>
<script language="JavaScript" src="./dhtmlxmenubar_cp.js">script>
<link rel="STYLESHEET" type="text/css" href="./dhtmlxtree.css">
<link rel="STYLESHEET" type="text/css" href="./context.css">
<link rel="STYLESHEET" type="text/css" href="./dhtmlxmenu.css">
head>
<body>
<div id="treeBox" style="width:200;height:200">div>
<script>
  //init menu
  aMenu=new dhtmlXContextMenuObject('120',0,"images/");
  aMenu.menu.loadXML("./_context.xml");
  aMenu.setContextMenuHandler(onMenuClick);

  tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
  tree.setImagePath("images/");
  tree.enableCheckBoxes(true);
  tree.enableDragAndDrop(true);
  tree.enableContextMenu(aMenu); //link context menu to tree
  tree.loadCSV("./data.txt");//for loading from file

  function onMenuClick(id,s){ alert("Menu item "+id+" was clicked"+s); }
script>
body>
html>

3、数据文件data.txt

1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
bd2f46a212ffae3b011305afd5eb0108,4,node 2.1
6,1,node 1.2

4、菜单文件_context.xml

xml version='1.0' ?>
<menu absolutePosition="auto" mode="popup" maxItems="8"  globalCss="contextMenu" globalSecondCss="contextMenu" globalTextCss="contextMenuItem">
        <MenuItem name="Red" src="./images/red.gif"  id="edit_Red"/>
        <MenuItem name="Green" src="./images/green.gif"  id="edit_Green"/>
        <MenuItem name="Blue" src="./images/blue.gif"  id="edit_Blue"/>
    <MenuItem name="Other" src="" id="outher" width="120px" panelWidth="120">
        <MenuItem name="Yellow" src="./images/yellow.gif"  id="edit_Yellow"/>
        <MenuItem name="White" src="./images/white.gif"  id="edit_White"/>
    MenuItem>
menu>

注：dhtmlxTree 标准版不支持菜单功能，所以需要对dhtmlxtree.js做些修改，在脚本的最后面加上如下方法：

dhtmlXTreeObject.prototype.enableContextMenu=function(menu)
{
if(menu) this.cMenu=menu
};

josson 2008-01-30 15:53 发表评论

IE7 对话框样式

josson — Mon, 21 Jan 2008 01:46:00 GMT

1、模态窗口自适应:
在Internet Explorer中定义window.open 和 window.showModalDialog以打开一个网页对话框的时候,在不同版本的Windows和不同版本的IE中,窗口的大小和样式都是不同的。在IE7中更是有了很大的不同,状态栏,主要内容被默认保留(下详),还加了一个只读状态的地址栏.窗口的最小尺寸被限定在了250*150：

如上图所示：在ie7中，定义的高度仅仅是窗体内容高度，状态栏及地址栏的高度都不算在内的；而ie6则包含了状态栏及地址栏的高度。所以，我们需要依据不同的操作系统及ie版本，高度自适应的js代码如下：

/**
* 模态窗口高度调整.
* 根据操作系统及ie不同版本,重新设置窗口高度,避免滚动条出现.
*/
function resetDialogHeight(){
  if(window.dialogArguments == null){
    return; //忽略非模态窗口
  }

  var ua = navigator.userAgent;
  var height = document.body.offsetHeight;
  if(ua.lastIndexOf("MSIE 6.0") != -1){
  if(ua.lastIndexOf("Windows NT 5.1") != -1){
    //alert("xp.ie6.0");
    var height = document.body.offsetHeight;
    window.dialogHeight=(height+102)+"px";
  }
  else if(ua.lastIndexOf("Windows NT 5.0") != -1){
    //alert("w2k.ie6.0");
    var height = document.body.offsetHeight;
    window.dialogHeight=(height+49)+"px";
  }
}
}

模态窗口页面加上如下代码：

//窗口加载后，判断系统及其ie版本调整高度
window.onload = resetDialogHeight;

2、ie7中模态窗口提交时新开窗口问题:
IE 7.0对模态窗口属性的放置位置更加严格。标签必须放置在标签对中，否则提交表单时总是会新开窗口。示例如下：

<html>
<head>
<title>标题title>
<base target="_self"/>
.. .. ..
head>
<body onload="pageClose();" scroll="no">
.. .. ..
body>
html>

josson 2008-01-21 09:46 发表评论

iframe 高度自适应

josson — Thu, 17 Jan 2008 05:56:00 GMT

1、目的
系统通过一内嵌页面(iframe) 来展现网页内容（也包括内嵌页中再嵌一个网页），这将会引起如下几个问题：
a.不同的网页内容多少不一致，导致iframe的高度无法与实现内容或浏览器高度相匹配。
b.窗口缩放时，不能iframe不能进行自动调整。

针对这两个问题，写了一些js方法，使iframe自动适应内容或浏览器高度。

2、js代码
在主框回页面中包括如下js方法:

/**
* 内嵌页面的高度设置
*/
function handleFrameLoad() {
var hDoc = getBodyHeight(document);
var tblmain =  document.getElementById('tblMain');
var mFrame = window.mainFrame;
var hFrameDoc = getFrameHeight(mFrame);
var hTable = hDoc-80; //减去该页面除iframe外其他控件所占的高度.
if(hFrameDoc > hTable) hTable = hFrameDoc;
tblmain.style.height = hTable;
mFrame.height = hTable;
if(window.mainFrame.moduleRight != null){
    //表示该内嵌页，包含内嵌的页面，页iframe的id固定为moduleRight。
    initFrameHeight(mFrame,hTable);
}
}

/**
* 获取当前页面的高度
*/
function getBodyHeight(doc){
  if(doc.all) return doc.body.offsetHeight;
  else return doc.body.scrollHeight;
}

/**
* 获取内嵌页中的高度.
* 若另含子内嵌(moduleRight)页时,应考虑该页面的高度.
*/
function getFrameHeight(mFrame){
  var h1 = mFrame.document.body.offsetHeight;
  var h2 = mFrame.document.body.scrollHeight;
  if(mFrame.moduleRight != null){
      var h3 = mFrame.moduleRight.document.body.scrollHeight;
    if(h3 > h2) h2 = h3;
  }
  return h2;
}

/**
* 设置子内嵌页面的高度.
* 通过设置iframe所在table的高度来调整。
*/
function initFrameHeight(frame,hFrame){
  var tbl = frame.document.getElementById('tblMainFrame');
  tbl.style.height = hFrame;
}

3、其他设置
主页面(main.jsp)，在加载完毕（onload）、窗口大小调整(onresize)，以及iframe的加载完毕时，需调用:handleFrameLoad，代码如下:

<html>

  <body onload="handleFrameLoad();" onResize="handleFrameLoad();">

  <iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>

  body>
html

其他内嵌页如下(注：此处的iframe高度设为100%，其高度由父页面通过设置table<tblMainFrame>的高度来进行调整)：

<html>

  <body class="body" style="overflow:hidden;margin:0px;padding:0px">
    <table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td id='content' height=100%>
          <iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>
        td>
      tr>
    table>
  body>
html

4、样例下载: sample

josson 2008-01-17 13:56 发表评论

DWR Reverse 一些细节

josson — Fri, 04 Jan 2008 04:37:00 GMT

1、web.xml设置

  <servlet>
    <servlet-name>dwr-invokerservlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServletservlet-class>
    <init-param>
      <param-name>activeReverseAjaxEnabledparam-name>
      <param-value>trueparam-value>
    init-param>
  servlet>

  <servlet-mapping>
    <servlet-name>dwr-invokerservlet-name>
    <url-pattern>/dwr/*url-pattern>
  servlet-mapping>

2、client端将 setActiveReverseAjax设为true

dwr.engine.setActiveReverseAjax(true);

使用Reverse AJAX，client端就不用指定call back function，当执行server端的method时，会自动调用client端javascript来执行。

3、Server端通过ScriptSession，找到对到的client端JS方法

//取得当前执行页面
WebContext wctx = WebContextFactory.get();
String currentPage = wctx.getCurrentPage();
//取得目前执行中的ScriptSession
ScriptSession scriptSession = wctx.getScriptSession();
//或是取得某page开启中的client ScriptSession
Collection sessions = wctx.getScriptSessionsByPage("/ajax/client.jsp");

//根据ScriptSession来执行client端的 DWRUtil
Util utilThis = new Util(wctx.getScriptSession());

//调用WRUtil，在客户端生成相应的脚本，实现消息的输出
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", messages, "text");

4、网上的范例
chat.jsp页面，点击发送按钮，调用javascript的sendMessage()方法将消息发送出(注意这里没有指定call back function。)。

function sendMessage() {
JavaChat.addMessage();
}

服务端JavaChat代码，调用DWRUtil，在客户端生成脚本，将消息输出到页面中。

//JavaChat.java
public void addMessage(String messsage){
    Util utilAll = new Util(sessions);
    utilAll.addScriptSessions(wctx.getScriptSessionsByPage("/chat.jsp"));
    utilAll.removeAllOptions("chatlog");
    utilAll.addOptions("chatlog", message, "text");
}

josson 2008-01-04 12:37 发表评论

不错的Javascript组件.

josson — Fri, 04 Jan 2008 04:11:00 GMT

http://dhtmlx.com/

包括树、菜单、表格、工具条等。。。

josson 2008-01-04 12:11 发表评论

使用 Continuations 和 Reverse Ajax 创建事件驱动 Web 应用程序

josson — Mon, 24 Dec 2007 02:19:00 GMT

该文展示如何结合使用 Jetty servlet 引擎和 DWR 简捷有效地实现一个 Comet Web 应用程序，以及其中的一些细节及原理。

文章地址：http://www.ibm.com/developerworks/cn/java/j-jettydwr/

一些问题：
１、web.xml配配置，DWR使用2.0RC3以下版本时须全用选项：pollAndCometEnabled代替activeReverseAjaxEnabled，如下：

  <servlet>
    <servlet-name>dwr-invokerservlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServletservlet-class>

    <init-param>
      <param-name>pollAndCometEnabledparam-name>
      <param-value>trueparam-value>
    init-param>
    <init-param>
      <param-name>initApplicationScopeCreatorsAtStartupparam-name>
      <param-value>trueparam-value>
    init-param>
  servlet>

  <servlet-mapping>
    <servlet-name>dwr-invokerservlet-name>
    <url-pattern>/dwr/*url-pattern>
  servlet-mapping>

选项说明（http://getahead.org/dwr/server/servlet 可查询更多参数的说明）：
1)、activeReverseAjaxEnabled
true 表示激活轮询和 Comet 功能。2.0 RC3以前版本，参数名为：pollAndCometEnabled。

2)、initApplicationScopeCreatorsAtStartup　通知 DWR 在应用程序启动时初始化 ReverseAjaxTracker。这将在对 bean 生成第一个请求时改写延迟初始化（lazy initialization）的常规行为 —— 在本例中这是必须的，因为客户机不会主动对 ReverseAjaxTracker 调用方法。

josson 2007-12-24 10:19 发表评论

DWR 站点收藏

josson — Mon, 24 Dec 2007 02:06:00 GMT

里面有很多DWR使用的经验技巧，有一定的参考价值：

http://www.javatang.com/archives/tag/dwr

josson 2007-12-24 10:06 发表评论

DWR 跨域请求

josson — Mon, 24 Dec 2007 01:53:00 GMT

1、实现DWR跨域支持

a.配置web.xml文件，dwr定义时加入以下参数设置：

<init-param>
  <param-name>allowGetForSafariButMakeForgeryEasierparam-name>
  <param-value>trueparam-value>
init-param>
<init-param>
  <param-name>crossDomainSessionSecurityparam-name>
  <param-value>falseparam-value>
init-param>
<init-param>
  <param-name>allowScriptTagRemotingparam-name>
  <param-value>trueparam-value>
init-param>

b.客户端调用：

//客户端调用时，须指定调用路径，否则默认调用的是当前页面所在服务端的/dwr，而不是实际的/dwr服务。
//故未设置Remote._path时，很可能提示你"dwr/call/plaincall/XXX.ZZZ.dwr"的信息。
//Remote 为dwr.xml中定义的java类对应的jascript名称
Remote._path = 'http://otherdomain.com/webapp/dwr';
//或:dwr.engine._defaultPath = 'http://otherdomain.com/webapp/dwr';
Remote.someFunction();

更详细的说明可参见官网 Remoting Options 章节（http://getahead.org/dwr/browser/engine/options）。

2、DWR的Session支持

DWR通过 WebContext / WebContextFactory 来取得HttpServletRequest、HttpServletResponse、HttpSession、ServletContext、 ServletConfig等对象。（DWR2.0）实现可参见DWR内部脚本，engine.js文件"dwr.engine._getJSessionId"部份代码。

更多详细信息见官网API：http://getahead.org/dwr/server/javaapi。

所以SESSION根据jsessionid来确定的，jsessionid存放在cookie中，若客户端禁止cookie的话，jsessionid每次都新生成，所以无法确保在服务端的SESSION唯一。跨域调用DWR时，浏览器默认禁止第三方cookie，所以会有正常使用SESSION功能。设置Internet选项，"隐私"，"高级"，开始对第三方cookie的支持，即可解决这个问题。

josson 2007-12-24 09:53 发表评论

一些正则表达式

josson — Wed, 21 Nov 2007 14:38:00 GMT

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　 //正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　 //负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url
"^[A-Za-z0-9_]*$"

josson 2007-11-21 22:38 发表评论

Javascript才数据验证方法若干

josson — Wed, 21 Nov 2007 14:31:00 GMT

/**
* 校验是否全由数字组成
*/
function isDigit(s)
{
    var patrn=/^[0-9]{1,20}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
*/
function isRegisterUserName(s)
{
    var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验用户姓名：只能输入1-30个以字母开头的字串
*/
function isTrueName(s)
{
    var patrn=/^[a-zA-Z]{1,30}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验密码：只能输入6-20个字母、数字、下划线
*/
function isPasswd(s)
{
    var patrn=/^(\w){6,20}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
*/
function isTel(s)
{
    var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验手机号码：必须以数字开头，除数字外，可含有“-”
*/
function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

/**
* 校验邮政编码
*/
function isPostalCode(s)
{
    var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 校验搜索关键字
*/
function isSearch(s)
{
    var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\]
    [\]\{\}:;'\,.<>?]{0,19}$/;
    if (!patrn.exec(s)) return false
    return true
}

/**
* 检查是否是有效的IP地址
*/
function isIpAddr(addr)
{
    var patrn=/^[0-9.]{1,20}$/;
    if (!patrn.exec(s)) return false
    return true
}

josson 2007-11-21 22:31 发表评论

JavaScript常用检测脚本(三）表单验证

josson — Tue, 22 May 2007 01:49:00 GMT

摘要: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/*-------------------------------------------------------------------------------说明：JavaScript脚本，验证表单中... 阅读全文

josson 2007-05-22 09:49 发表评论

JavaScript常用检测脚本(二)

josson — Tue, 22 May 2007 01:31:00 GMT

/**
* 用途：检查输入字符串是否只由英文字母和数字和下划线组成
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isNumberOr_Letter( s ){
    var regu = "^[0-9a-zA-Z\_]+$";
    var re = new RegExp(regu);
    if (re.test(s))  return true;
    else    return false;
}

/**
* 用途：检查输入字符串是否只由英文字母和数字组成
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isNumberOrLetter( s ){//判断是否是数字或字母
    var regu = "^[0-9a-zA-Z]+$";
    var re = new RegExp(regu);
    if (re.test(s))  return true;
    else return false;
}

/**
* 用途：检查输入字符串是否只由汉字、字母、数字组成
* 输入：value, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isChinaOrNumbOrLett( s ){
    var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
    var re = new RegExp(regu);
    if (re.test(s))   return true;
    else return false;

}

/**
* 用途：判断是否是日期
* 输入：date：日期；fmt：日期格式
* 返回：如果通过验证返回true,否则返回false
*/
function isDate( date, fmt ) {
    if (fmt==null) fmt="yyyyMMdd";
    var yIndex = fmt.indexOf("yyyy");
    if(yIndex==-1) return false;
    var year = date.substring(yIndex,yIndex+4);
    var mIndex = fmt.indexOf("MM");
    if(mIndex==-1) return false;
    var month = date.substring(mIndex,mIndex+2);
    var dIndex = fmt.indexOf("dd");
    if(dIndex==-1) return false;
    var day = date.substring(dIndex,dIndex+2);
    if(!isNumber(year)||year>"2100" || year< "1900") return false;
    if(!isNumber(month)||month>"12" || month< "01") return false;
    if(day>getMaxDay(year,month) || day< "01") return false;
    return true;
}

/**
* 用途：获取每月的最后一天日期值.
* 输入：date：年份；month：月份
* 返回：如果通过验证返回true,否则返回false
*/
function getMaxDay(year,month) {
    if(month==4||month==6||month==9||month==11)
        return "30";
    if(month==2)
        if(year%4==0&&year%100!=0 || year%400==0)
            return "29";
        else
            return "28";
    return "31";
}

/**
* 用途：字符1是否以字符串2结束
* 输入：str1：字符串；str2：被包含的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isLastMatch(str1,str2){
    var index = str1.lastIndexOf(str2);
    if(str1.length==index+str2.length) return true;
    return false;
}

/**
* 用途：字符1是否以字符串2开始
* 输入：str1：字符串；str2：被包含的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isFirstMatch(str1,str2){
    var index = str1.indexOf(str2);
    if(index==0) return true;
    return false;
}

/**
* 用途：字符1是包含字符串2
* 输入：str1：字符串；str2：被包含的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isMatch(str1,str2){
    var index = str1.indexOf(str2);
    if(index==-1) return false;
    return true;
}

/**
* 用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，且结束如期>=起始日期
* 输入：startDate：起始日期(字符串),   endDate：结束如期(字符串)
* 返回：如果通过验证返回true,否则返回false
*/
function checkTwoDate( startDate,endDate ) {
    if( !isDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    } else if( !isDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    } else if( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
}

josson 2007-05-22 09:31 发表评论

JavaScript常用检测脚本（一）

josson — Thu, 17 May 2007 05:00:00 GMT

JavaScript脚本，用于检查网页提交表单的输入数据。

/**
* 用途：校验ip地址的格式
* 输入：strIP：ip地址
* 返回：如果通过验证返回true,否则返回false；
*/
function isIP(strIP) {
    if (isNull(strIP)) return false;
    var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
    if(re.test(strIP)){
        if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
    }
    return false;
}

/**
* 用途：检查输入字符串是否为空或者全部都是空格
* 输入：str
* 返回：
* 如果全是空返回true,否则返回false
*/
function isNull( str ){
    if ( str == "" ) return true;
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
}

/**
* 用途：检查输入对象的值是否符合整数格式
* 输入：str 输入的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isInteger( str ){
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
}

/**
* 用途：检查输入手机号码是否正确
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function checkMobile( s ){
    var regu =/^[1][3][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(s))    return true;
    else    return false;
}

/**
* 用途：检查输入字符串是否符合正整数格式
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isNumber( s ){
    var regu = "^[0-9]+$";
    var re = new RegExp(regu);
    if (s.search(re) != -1)  return true;
    else     return false;
    }
}

/**
* 用途：检查输入字符串是否是带小数的数字格式,可以是负数
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isDecimal( str ){
    if(isInteger(str)) return true;
    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
    if (re.test(str)) {
        if(RegExp.$1==0&&RegExp.$2==0) return false;
        return true;
    } else {
    return false;
    }
}

/**
* 用途：检查输入对象的值是否符合端口号格式
* 输入：str 输入的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isPort( str ){
    return (isNumber(str) && str<65536);
}

/**
* 用途：检查输入对象的值是否符合E-Mail格式
* 输入：str 输入的字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isEmail( str ){
    var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
    if(myReg.test(str)) return true;
    return false;
}

/**
* 用途：检查输入字符串是否符合金额格式
* 格式定义为带小数的正数，小数点后最多三位
* 输入：s, 字符串
* 返回：如果通过验证返回true,否则返回false
*/
function isMoney( s ){
    var regu = "^[0-9]+[\.][0-9]{0,3}$";
    var re = new RegExp(regu);
    if (re.test(s)) return true;
    else return false;
}

josson 2007-05-17 13:00 发表评论