ITV前端开发注意事项

一、各个机顶盒对jQuery和JS的支持情况。

图1.1

注：华为1308（IE6）虽然支持cloneNode方法，但不是真正的深度克隆，修改原元素也会影响到克隆元素。

二、布局

ITV机顶盒对表格布局支持表现良好，但对DIV+CSS布局的支持表现很不稳定，以下是布局所遇到的情况和解决方法。

1、水平居中

图2.1

从图2.1可以看出，在华为1308（IE6）机顶盒下，DIV水平居中使用margin:0 auto;无效，上面提到：ITV对表格布局支持表现良好。所以使用margin:0 auto;则可以让表格水平居中。

2、垂直居中

网上有一大推的垂直居中的办法，这里就不再赘述。在华为1308a下无法获取图片宽高时水平垂直居中的解决方案：图片作为背景，使用background-positon:50%  50%让背景图片水平垂直居中。

三、宕机问题

（1）IE6内核机顶盒对标签嵌套要求非常严格，当遇到宕机问题时首先要想到是不是标签嵌套符不符合规格，比如a标签包含div标签时就会引起宕机问题。

（2）上面除了华为1308（标清）允许出现滚动条外，其他机顶盒出现滚动条都容易引起宕机。

四、焦点处理

ITV默认自带有焦点框，处理好焦点是ITV的重中之重。

1、概念

焦点元素：能够获得焦点的元素，目前只有a和input，而且a的属性href为空时设置为href=’javascript:;’。

2、在IE6内核机顶盒中下，切换焦点元素visibility：visible和visibility:hidden，焦点元素不会自动获得焦点；但切换焦点元素display:inline和display:none,焦点元素可以自动获得焦点。

3、焦点无法包含内容的问题：如果设置了display：inline-block和block,那么中兴B600（IE6）和华为1308（标清）中的焦点元素a就无法包含里面内容，焦点显示会小于内容部分，这大大的影响了用户的体验,所以在这两个机顶盒上不要给a设置任何块状属性。另外华为1308（标清）中的input无论是设置了value还是type=’image’,src=’/image/1.png’，input元素都无法获得圆满的焦点，解决方案是用a元素内嵌图片代替。

4、焦点屏蔽

（1）概念

替换标签：替换a元素的标签，比如span,label;

（2）在ITV中做弹窗，那就得好好的处理底层的焦点了，可以使用我封装好的组件focusCover.js，考虑到性能问题，样式要手动加到页面<style>中，方法是复制a元素的样式粘贴到页面中，用替换标签替换掉a元素即可。

不过华为1308a要另外处理，因为它不支持cloneNode的深度克隆，replaceChild，removeChild，所以我们得用一种不想用而又不得不用的办法（当然如果能想到其他办法更好）：

第一步：复制底层元素，在</body>前粘贴一个副本，把这个副本所有ID改成class，ID的样式粘贴到<style>中，改成.类选择器。这样做是为了避免ID冲突和可能引起的布局问题。

第二步：用替换元素替换掉所有a元素。

第三步：设置这个副本display:none；

现在就有了两份文档，一份有焦点，一份没有焦点，但显示一模一样，这样就可以切换显示，做到焦点屏蔽。

五、事件监听

华为1308a（IE6）只支持在元素中写事件绑定函数，例如<input type=’button’ onclick=’Fn’  id=’button’/>,在JS中写成button.onclick=Fn则不起作用，也无法使用事件监听函数addEventListener和attachEvent;

六、Ajax使用

Ajax的使用要注意以下两点：

（1）ajax请求数据要保证请求头编码和服务端返回头编码一致，一致为utf-8；另外，服务端返回头contentType要设为contentType=’text/html’，如果不设的话默认返回是’text/plain’，这也是在IE下响应头charset=utf8 少了‘–’的原因。

详情请查阅：http://www.fengweiqi.cn/?p=266

（2）创建ajax对象要放到全局环境，在onreadystatechange=function(){}函数中的变量要设为全局变量。

（3）Ajax可在所有机顶盒上可执行创建函数可以在common.js中找，createAjax()。

七、CSS解析引擎

问题：在华为1308（IE6）中，JS设置样式会打断CSS解析引擎正常执行，导致CSS文件开头部分的样式没有得到解析。

解决方案：用setTimeout延迟JS设置样式函数的执行，或者window.onload后执行样式设置函数。

八、滚动条

IE6内核机顶盒没有滚动条。

九、九宫格

ITV九宫格使用表格布局。

十、白边问题

表现：背景图片没有铺满电视屏幕，周围有白色线条。

问题分析：引起这个问题是机顶盒规格不准确，可能大于标准规格。

解决方案：给body设置background-image，而且背景图片要大于标准规格，一般宽高大10px即可。

创建日期：2013-08-23