UTF-8页面引用外部编码为GBK的JS文件编码的处理

昨天写的一个根据来访者IP返回来访者所在地区的天气情况的WordPress天气插件侧边栏,效果见本博客的首页侧边栏“天气预报”。其中根据IP返回来访者城市地理位置的方法是采用了QQ的一个接口:http://fw.qq.com/ipaddress,而这个接口提供的js为GBK编码的,由于[我的博客](http://js8.in “断桥残雪部落格”)是UTF-8编码的,所以再次使用返回的城市名称在我页面显示的是乱码,而且不能引用的。

上网找了很多关于JavaScript把GBK编码转换为UTF-8编码的js函数,可是都无济于事,并且如果单单为了编码问题就单独写一个js函数来处理GBK转UTF-8编码,这是很不合理的~由于本来我引用的是QQ的根据IP返回城市接口,我自己是不能够改变QQ官方的数据编码格式的,解决的方法唯有我在我的程序中把GBK编码的js强制转换为utf-8的格式,怎么转换是个比较难的方式,既然不能通过写js函数,那就只用用其他的方式了。

最后我在网上找到了一个很好的解决方法,

发布WordPress来访者天气预报插件

细心的童鞋会发现我的博客昨天添加了一个新的功能——天气预报,昨天我说要发布给大家的,晚上睡觉之前,想了很久关于WordPress天气插件的编写,基本上在晚上就已经理清了思路,早上很早就起床了,没有吃饭就来到公司,趁着大家还没有来的时候,我要在九点上班之前把WordPress来访者天气预报的插件做出来,加上之前开发的WordPress Follow5 插件开发经验,自己写WordPress来访者天气插件已经是轻车熟路了~

这个插件的使用的是jsonp技术,首先通过QQ的ip接口(http://fw.qq.com/ipaddress)获取到来访者的城市**地理信息**,然后使用WordPress的wp_footer的hook动态建立一个JavaScript文件,文件地址为我博客的[http://js8.in/weather/js.php](http://js8.in/weather/wordpress-weather “WordPress天气插件下载”),js.php返回的是一段JavaScript代码,代码使用innerHTML插入来访者天气预报的内容。

WordPress来访者天气预报插件采用精美的天气图标,完全DIV+CSS页面布局,保证了页面的美观大气,数据库信息来自中国气象网,保证了数据的可靠性,并且熟悉CSS的童鞋还可以修改插件中的CSS,以达到自己喜欢的页面效果。css地址为wp-content\plugins\weather\css.css

插件如不能正常使用,请看以下注意事项:

1、保证您的主题皮肤中的footer.php中存在do_action(‘wp_footer’);函数

2、如出现其他情况,请来插件页面报错
WordPress来访者天气预报插件截图

使用方法:

1、下载插件(点击下载)并上传到wp-content\plugins目录中;
2、登录网站后台安装此插件;
3、然后进入“外观”,“小工具”,把“Weather Widget”小工具拖到右侧,填写插件显示名称(如:天气预报)即可。

最后更新时间:2009-12-12 8:55

下载地址:http://js8.in/weather/vistor_weather.zip

当前最新版本为:0.1

推荐六个在线制作Loading图标的网站

经常来我的博客的而且细心的童鞋可以看见我的网站侧边栏加上了天气预报插件,这是我自己写的,代码稍后放出,写的时候需要一个Loading的gif,于是上网找生成Loading图标的网站,这里我推荐六个网站,希望大家喜欢~

1、Ajax Load

Ajax Load 在线loading图标制作网站

Ajax Load所提供的种类丰富,也可以自定义Loading图标样式,推荐!

2、Load Info

Load Info loading图标网站

Load Info在线制作Loading图标的免费网站,目前Load Info网站提供了90多种(总有一种适合你)动态图标。而且每种图标都自定义背景色和前景色,更有三种不同的尺寸可以选择,包括 16×16, 24×24, 48×46,很是方便实用。

设置htaccess应该注意的问题

今天给爱墙做SEO优化,发现自己没有自定义404页面,并且还发现存在index of列目录的漏洞,后来才知道原来WordPress都没有在htaccess中使用Options -Indexes来防止列目录,于是先加上了Options -Indexes来防止列目录的问题,自动转为了404错误,而不是403,呵呵~

可是我改变了爱墙的根目录下的htaccess配置把404页面指到了404.html,可是就是不能实现404页面的跳转呢?难道htaccess的404配置不可用?而是直接都返回到了爱墙的首页http://love.js8.in)~这样子听说对**SEO**是很不好的,搜索引擎不会收录网站的首页,于是上网google原因,找了半天的原因也没有找到问题的根本所在~

后来我在一片不起眼的文章中找到了问题的所在~

CSS清除浏览器默认样式注意点

今天看了岁月如歌的一片文章《KISSY CSS Reset 1.0》其中写到了css重置的代码

/
KISSY CSS Reset
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
特色:1. 适应中文;2. 基于最新主流浏览器。
维护:玉伯, 正淳
Revision: 276
/

/ 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
form, fieldset, legend, button, input, textarea, / form elements 表单元素 /
th, td / table elements 表格元素 / {
margin: 0;
padding: 0;
}

/ 设置默认字体 /
body,
button, input, select, textarea / for ie / {
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } / 将斜体扶正 /
code, kbd, pre, samp { font-family: courier new, courier, monospace; } / 统一等宽字体 /
small { font-size: 12px; } / 小于 12px 的中文很难阅读,让 small 正常化 /

/ 重置列表元素 /
ul, ol { list-style: none; }

/ 重置文本格式元素 /
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } / 重置,减少对行高的影响 /
sub { vertical-align: text-bottom; }

/ 重置表单元素 /
legend { color: #000; } / for ie6 /
fieldset, img { border: 0; } / img 搭车:让链接里的 img 无边框 /
button, input, select, textarea { font-size: 100%; } / 使得表单元素在 ie 下能继承字体大小 /
/ 注:optgroup 无法扶正 /

/ 重置表格元素 /
table { border-collapse: collapse; border-spacing: 0; }
而我在腾讯webteam中看到一篇文章《border:none;与border:0;的区别》中提到

使用CSS控制打印页面格式

之前做地图打印页面的时候,经理要求打印时候把打印的按钮去掉。这个时候就用到了控制打印样式表了。
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />

正因为xhtml和css是分离的,所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求,良好的扩展标记和结构嵌套,使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了,你象设置word一样去写你想打印的页面吧。
后来想了想,其实单独写一个css增加了请求次数,就想到了@media print{}的作用,代码如下

@media print{
 .printdesc
{
    right: 0;
    width: 685px;
    height: 69px;
    background-color: #FFFFFF;
    float:left;
    overflow:auto;
    border:0px;
}
.text{
    float:right;
    width: 688px;
    margin-top:20px;
}
.printlink{
    height:0px;
    display:none;
    width:0px;
    z-index:-10;

}
.printlink a{
    display:none;
}
}

后来想到如果打印页面的某一部分,可以使用iframe来进行操作,现在的打印页面的局部内容基本上就是使用iframe进行处理的~特此记录一下

javascript高效简洁代码的编写及优化技巧

前言

随着互联网前端技术的革新,javascript越来越重要,并且js的轻便,非严格的写法,使越来越多的人掌握了js,可是谈到js的写法,很多人都觉得自己很熟悉,很了解,但是笔者在实践中发现js并非大家想象的那么简单,就像同事一句话:php会的很多,一抓一大把,而真正会js的却不多。仔细想想,原因很简单,js的加载到客户端运行的,不像php可以一个include就可以搞定,而且引入的文件中不用的函数可以放着不动,而js不同,如果加入很多很多无用的函数会大大的占有带宽,不利于用户体验。下面结合笔者实际开发过程中遇到的问题,以及自己收集的技巧,谈谈js高效简洁代码的编写及其优化的技巧。当然网上也有很多类似的文章,不过建议大家还是不要人云亦云,真正适合自己的技巧跟编写习惯才是最好的!

真假的判断

Javascript中有null、undefined、string、number、boolean五种基本的类型,一般判断真假或者为空的时候大家会使用下面的代码:


if(a==true){
    //doSomeTing();
}```但是这种方法很不简洁,我们完全可以使用1,0来判断,比如我们设定一个a,如果a为假,我们就改成真,而a在程序后面可能用于判断,最简单也是最好理解的方法就是下面的写法
```javascript

var a=false;
if(a==false){
    a=true;
}
```既然提到了0,1,肯定有人想到了第二种写法:
```javascript

var a=0;
if(!a){
    a=1;
}
```这个代码还可以进一步简写优化,就是使用js的三元运算符,也就是三目运算符:
```javascript

var a=0;
!a?a=1?null;

还有一点,对于空字符串的判断,往往采用if(a==””),其实对于空字符本身就是false,下面我总结了下Javascript中的真假值,希望对大家有用

CSS 3.0 参考手册 (中文版)下载

原文来自:腾讯webteam

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

手册难点

  1. 中文资料少,对英文翻译功底要求较高;
  2. 基础语法要求字斟句酌,避免产生歧义;
  3. 兼容性列表涉及浏览器及版本众多;
  4. 草案中的Grid布局被业界同仁普遍认为比“天书”还难…

CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等
CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

php、js两种不同方式根据关键词返回经纬度接口【基于Google map API】

P.S:在本文章中您将找到根据城市关键词获取经纬度的方法,即就是通过google map API的逆经纬度查询接口获得经纬度。
google map api是一个强大的地图API,很多知名的网站都是用了google地图API,曾经我也写过一个根据来访者甚至域名来查询经纬度的程序(http://js8.in/mywork/ipsearch)。文章链接地址为:根据IP返回地理位置地址以及地理经纬度的方法,关于经纬度的其他文章可以参考全国各省市,县级城市经纬度SQL数据以及js数组
其中使用的是纯真IP数据库,已经google地图的逆经纬度查询~
而本例中我们实现的主要方式是php如何获得关键字的经纬度。
使用过Google map API的人都知道google有一个逆经纬度查询的接口,例如:

geocoder = new GClientGeocoder();geocoder.getLocations(
          '山东青岛',
        function($){
var lalton = $.Placemark[0].Point.coordinates;
alert(latlon[0]+","+latlon[1]);
});```可是对于php应该怎样获取**经纬度**呢?
今天在无意的时候看到一个wp的插件,其中找到了方法,就是通过google map API的逆经纬度查询接口获得经纬度~
首先你需要去http://code.google.com/intl/zh-CN/apis/maps/signup.html申请一个google map api的授权域名**key**,
google的map api逆经纬度接口为:
http://maps.google.com/maps/geo?q=关键词(如山东青岛)&key=刚刚申请的API KEY&sensor=false&output=xml&oe=utf8
请求下来的数据时kml的数据格式,怎样解析呢?
<!--more-->我们可以使用**xml**的方式来进行解析,这里我提供一个解析的**php**代码,代码来自于wp的一个插件
第一个函数是xml2array(),这个函数的作用就是把xml转换为数组便于操作
参数$url为请求的xml地址,返回的是一个xml转换成的数组

```php
//from http://us3.php.net/manual/en/function.xml-parse.php
function xml2array($url, $get_attributes = 1, $priority = 'tag')
{
    $contents = "";
    if (!function_exists('xml_parser_create'))
    {
        return array ();
    }
    $parser = xml_parser_create('');
    if (!($fp = @ fopen($url, 'rb')))
    {
        return array ();
    }
    while (!feof($fp))
    {
        $contents .= fread($fp, 8192);
    }
    fclose($fp);
    xml_parser_set_option($parser, XML_OPTION_TARGET_ENCODING, "UTF-8");
    xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
    xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1);
    xml_parse_into_struct($parser, trim($contents), $xml_values);
    xml_parser_free($parser);
    if (!$xml_values)
        return; //Hmm...
    $xml_array = array ();
    $parents = array ();
    $opened_tags = array ();
    $arr = array ();
    $current = & $xml_array;
    $repeated_tag_index = array ();
    foreach ($xml_values as $data)
    {
        unset ($attributes, $value);
        extract($data);
        $result = array ();
        $attributes_data = array ();
        if (isset ($value))
        {
            if ($priority == 'tag')
                $result = $value;
            else
                $result['value'] = $value;
        }
        if (isset ($attributes) and $get_attributes)
        {
            foreach ($attributes as $attr => $val)
            {
                if ($priority == 'tag')
                    $attributes_data[$attr] = $val;
                else
                    $result['attr'][$attr] = $val; //Set all the attributes in a array called 'attr'
            }
        }
        if ($type == "open")
        {
            $parent[$level -1] = & $current;
            if (!is_array($current) or (!in_array($tag, array_keys($current))))
            {
                $current[$tag] = $result;
                if ($attributes_data)
                    $current[$tag . '_attr'] = $attributes_data;
                $repeated_tag_index[$tag . '_' . $level] = 1;
                $current = & $current[$tag];
            }
            else
            {
                if (isset ($current[$tag][0]))
                {
                    $current[$tag][$repeated_tag_index[$tag . '_' . $level]] = $result;
                    $repeated_tag_index[$tag . '_' . $level]++;
                }
                else
                {
                    $current[$tag] = array (
                        $current[$tag],
                        $result
                    );
                    $repeated_tag_index[$tag . '_' . $level] = 2;
                    if (isset ($current[$tag . '_attr']))
                    {
                        $current[$tag]['0_attr'] = $current[$tag . '_attr'];
                        unset ($current[$tag . '_attr']);
                    }
                }
                $last_item_index = $repeated_tag_index[$tag . '_' . $level] - 1;
                $current = & $current[$tag][$last_item_index];
            }
        }
        elseif ($type == "complete")
        {
            if (!isset ($current[$tag]))
            {
                $current[$tag] = $result;
                $repeated_tag_index[$tag . '_' . $level] = 1;
                if ($priority == 'tag' and $attributes_data)
                    $current[$tag . '_attr'] = $attributes_data;
            }
            else
            {
                if (isset ($current[$tag][0]) and is_array($current[$tag]))
                {
                    $current[$tag][$repeated_tag_index[$tag . '_' . $level]] = $result;
                    if ($priority == 'tag' and $get_attributes and $attributes_data)
                    {
                    $current[$tag][$repeated_tag_index[$tag . '_' . $level] . '_attr'] = $attributes_data;
                    }
                    $repeated_tag_index[$tag . '_' . $level]++;
                }
                else
                {
                    $current[$tag] = array (
                        $current[$tag],
                        $result
                    );
                    $repeated_tag_index[$tag . '_' . $level] = 1;
                    if ($priority == 'tag' and $get_attributes)
                    {
                        if (isset ($current[$tag . '_attr']))
                        {
                            $current[$tag]['0_attr'] = $current[$tag . '_attr'];
                            unset ($current[$tag . '_attr']);
                        }
                        if ($attributes_data)
                        {
                            $current[$tag][$repeated_tag_index[$tag . '_' . $level] . '_attr'] = $attributes_data;
                        }
                    }
                    $repeated_tag_index[$tag . '_' . $level]++; //0 and 1 index is already taken
                }
            }
        }
        elseif ($type == 'close')
        {
            $current = & $parent[$level -1];
        }
    }
    return ($xml_array);
}

第二个函数getPoiAndAdd($address,$mapkey):
$address为查询的关键词,地址就可以啦,$mapkey为你申请的google map api key,
返回的是一个数组,其中包括了经纬度以及详细地址哦~

function gmshc_point ($address,$apikey){
    $find = array("\n","\r"," ");
    $replace = array("","","+");                    
    $address = str_replace( $find,$replace, $address);
    $url = 'http://maps.google.com/maps/geo?q='.$address.'&key='.$apikey.
         '&sensor=false&output=xml&oe=utf8';    
    $response = xml2array($url);    //此处调用都一个函数进行解析
    $coordinates = $response['kml']['Response']['Placemark']['Point']['coordinates'];
    $address = $response['kml']['Response']['Placemark']['address'];    
    if (!empty($coordinates)) {    
    $point_array = split(",",$coordinates);    
    $point = $point_array[1].",".$point_array[0];
    $response = array('point'=>$point,'address'=>$address);    
    return  $response;    
    }
}

jQuery浏览器判断一个bug,以及修改建议

前几天在使用jQuery(1.3.2)的时候,想使用下浏览器判断$.browser,可是我在使用$.browser.safari的时候,发现一个问题:
就是chrome浏览器也走$.browser.safari的判断,查看了jQuery的源代码:

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
    safari: /webkit/.test( userAgent ),
    opera: /opera/.test( userAgent ),
    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
    mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};```<!--more-->
经过同事**修改**后的代码是:
```javascript
var browserName = navigator.userAgent.toLowerCase();
mybrowser = {
    version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
    safari: /webkit/i.test(browserName) && !this.chrome,
    opera: /opera/i.test(browserName),
        firefox:/firefox/i.test(browserName),
    msie: /msie/i.test(browserName) && !/opera/.test(browserName),
    mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,
        chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}

完全可以使用,并且防止了safari跟chrome混淆的