技 术 文 件
技术文件名称：自研浏览器下EPG模版
开发注意事项
技术文件编号：
版 本：V1.01
拟 制 任建华
审 核
会 签
标准化
批 准
修改记录
文件编号 | 版本号 | 拟制人/ 修改人 | 拟制/修改日期 | 更改理由 | 主要更改内容 （写要点即可） |
V1.00 | 任建华 | 2007-2-26 | 无 | 在江苏新模版兼容自研浏览器的开发过程中的总结 | |
任建华 | 2007-3-1 | 会议内容补充 | 会议内容补充 | ||
2007-3-14 | 测试补充 | 补充焦点移动问题 | |||
| js在字符串中添加字符 | |||||
注：文件第一次拟制时，“更改理由”、“主要更改内容”栏写“无”。 | |||||
目录
1．显示偏差调整 4
2．页面黑屏现象 4
3．字体设置规范 4
4．js书写规范 6
5．input标签onclick事件的处理机制 6
6．嵌套div元素的排版 7
7．Cookie机制的不同 8
8．device对象的不同 8
9．会议补充 8
10．自研浏览器上焦点移动问题 9
自研浏览器下EPG模版开发注意事项
为了使模版在自研浏览器和茁壮浏览器获得兼容，主要要在以下几个方面作出调整，这在江苏新模版适应自研浏览器的开发中做了充分的测试（由于以下浏览器的兼容问题只是在江苏新模版中发现的，其他模版可能还会发现其他的问题，以后将逐渐添加上去）。
1．显示偏差调整
这是在两个浏览器兼容调整面临的主要问题之一，目前两个浏览器在jsp页面书写完全正确的情况下，div元素的展示位置方面还是有所偏差（具体原因不是很清楚，自研浏览器的显示相对比较规范），为了使页面在两个浏览器显示元素的位置相对美观一点，只能手工调整尽量使两个浏览器下都显示正常。该位置调整所需的工作量相对比较大。
2．页面黑屏现象
该现象的产生主要是由自研浏览器jsp页面的解析机制引起的，当我们将文字图片所在的div等显示元素放到了body标签前面时，自研浏览器将首先下载并展示放在body标签前面
的显示元素，而不会首先把body标签内设置的背景图片下载并展示出来，从而引起黑屏，因此为了避免黑屏现象的产生，在写jsp代码时必须将所有的页面展示元素（图片和文字等）放在body标签以内。
例如：
错误代码：
<div >
<b><font size="4" color="#000000">节目名称：</font></b>
</div>
<body background="images/bg_detail.jpg" link="#000000" onload="top.jsFrameInitEnd();">
正确代码：
<body background="images/bg_detail.jpg" link="#000000" onload="top.jsFrameInitEnd();">
<div >
<b><font size="4" color="#000000">节目名称：</font></b>
</div>
或者：考虑到iptv机顶盒用户的需要，对于下面写法的页面可以避免此问题：一、body后面设置有背景图片；二、页面中设置的img大小超过或者等于屏幕的大小；即，页面中必须这样设置图片，才能避免短暂的黑屏或者白屏现象。
3．字体设置规范
ZTEBW浏览器支持Truetype字体，可通过绝对大小、相对大小、百分比单位，相对长度单位px，绝对长度单位pt这几种方式来设置页面字体大小。为了在自研和茁壮浏览器内保持字体的显示一致，和自研浏览器的开发人员沟通过尽量使用Truetype字体的绝对大小像素单位px（或pix）。
例如：
不规范代码：
<div >
<b><font size="4" color="#000000">节目名称：</font></b>
</div>
规范代码：
<div rtcscls-4-s_r_0 rtcscls-4-r_1">font-size:18px; position:absolute">
<b><font color="#000000">节目名称：</font></b>
</div>
附最新的自研浏览器的字体对应关系
Css absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
Html中headings | H6 | H5 | H4 | H3 | H2 | H1 | ||
Html中FONT-SIZE | 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
对应Truetype字体大小 | 10px | 13px | 15px | 16px | 18px | 22px | 29px | 50px |
茁壮版本浏览器的字体对应关系
Css absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
Html中headings | H6 | H5 | H4 | H3 | H2 | H1 | ||
Html中FONT-SIZE | 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
对应Truetype字体大小 | 12px | 14px | 16px | 18px | 20px | 26px | 48px | |
4．js书写规范
js书写规范也是适应自研浏览器所需要作出重点调整的，自研浏览器和茁壮浏览器对js错误的处理是不一样的：ZTEBW和IE等主流浏览器遇到Javascript错误的时候表现是一致的：剩余的JS代码不会继续执行，而且会报错（可以通过串口打印信息看ztebw错误提示信息）；i
Panel则不同于前2者：iPanel遇到错误js脚本的时候，会继续执行下面的JS代码；不会报任何错误。
在江苏新模版兼容自研浏览器的开发过程中js错误引起的问题是最多的，由于茁壮浏览器对错误的js代码可以忽略从而导致好多不规范的js代码一直存在我们的jsp代码中，以后我们jsp开发中js代码的书写要注意以下几个方面：
发表评论