Heero's Blog

Heero's Blog » 前端开发

Opera下的max-width BUG

昨晚着手给个人博客增加网易微博的调用,在Opera下却出现了一个意想不到的问题。内容的展示,一开始是做成横向不间断滚动(现在已经改成纵向定时滚动了)。

不间断滚动的原理这里不详细说了,其中一个必要的条件是,进行滚动的内容容器要设置得很宽,这样才能使内容排在一行。一般情况下,几千像素也够了,但是微博的信息可能很长,况且一读就有好几十条,这宽度非得设成几万像素不可。

虽然数字比较大,但是在Firefox、IE中测试过后也是没问题的,唯独是Opera下出现了悲剧:

Dragonfly

从Opera的开发工具Dragonfly中可以发现,虽然我设置了宽度为80000px,但是计算结果只有32767px。当时我还没发觉32767这个数字的特殊之处

HTML在线编辑器的实现难点

到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。

HTML在线编辑器实际上是什么

其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。

<iframe src="" frameborder="0"></iframe>

只有这个空iframe是不行的,还要用Javascript把它设成可编辑:

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

换而言之,HTML在线编辑器就是一个可编辑的iframe

加粗、斜体、下划线、加链接等功能如何实现

浏览

IE9预览版简单试用

下载安装

今天一早回到公司上网就发现微软在Test Drive网站发布了IE9预览版,地址是 http://ie.microsoft.com/testdrive/ 。虽然我很想尝鲜,但是也担心这个预览版会把系统内的IE8正式版给覆盖了。后来在FAQ里面发现,预览版本不会覆盖其他浏览器,但是会共享IE8的一些设置。要注意的是,IE9预览版只能在Vista SP2以上版本的系统上安装。

安装包共14.2M,安装好以后,桌面上就多了一个“Internet Explorer Platform Preview”的图标。与IE8的图标相比,就是多了右下角的标签和箭头。

IE9预览版图标

双击图标打开IE9后,马上就跳转到Test Drive,此时内存占用为14M-15M。虽然是预览版,但是这个界面也太简洁了,地址栏都没有,要依次按“Page”、“Open”才能输入URL。

再论Javascript下字符串连接的性能

这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。

1 如何进行字符串连接?

首先让我们来回顾一下字符串连接的两种常用方法:

1.1 使用字符串连接运算符

常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:

var str = "";
str = str + "a";

1.2 使用数组

在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案

var str = [];
for (var i = 0; i < 100; i++) {
  

IE外壳型浏览器的userAgent

今天在虚拟机内的XP系统装了国内使用率比较高的IE外壳型浏览器,目的是为了看看它们的userAgent,以便在Javascript程序中区分这些浏览器。

IE外壳浏览器

测试程序是很简单的一行:

<script type="text/javascript">alert(navigator.userAgent);</script>

测试结果如下:

傲游(Maxthon)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon 2.0)

腾讯TT

Mozilla/4.0 (comp

淘宝搜索框研究报告

在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:

淘宝搜索框

这种设计一般是用javascript监控了输入框的focus和blur事件:

<input type="text" id="q" value="请输入关键字" />
<script type="text/javascript">//<![CDATA[
$("#q").onfocus = function() {
  if ("请输入关键字" == this.value) {
    this.value = "";
  }
  1. 第一页
  2. 上一页
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. 下一页
  9. 末页