用document.domain+iframe实现Ajax跨子域

Ajax跨域一直是个比较麻烦的问题,例如:断桥残雪在一个项目中使用了open打开一个跟父窗口不同域名的新页面,结果子窗口就不能传值给父窗口了;再如:我在www.2fool.cn下不可以获取love.2fool.cn域名下的页面内容。浏览器的跨域限制是为了安全,可是当我们想要在一个域名下请求另外一个域名的内容的时候就感觉不那么爽了。

我在WordPress天气插件滔滔API接口处理上都使用了JSONP的方法来实现的跨域。而今天我要通过使用JS的document.domain和iframe来解决Ajax跨子域的问题

原理

通过给主页面跟请求页面设置相同的document.domain来,欺骗浏览器,达到Ajax跨子域的效果,此方法在IE,chrome,Firefox,Safari,Opera下测试通过。

缺点:无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时,会产生安全性异常,拒绝访问。

三个使用WordPress自定义域做的小工具

刚开始建立WordPress博客的时候对于自定义域不是很了解,之后通过搜索相关知识:发现原来WordPress自定义域可以做很多事情,今天断桥残雪就说说WordPress自定义域三个用处:给某一日记添加js或者CSS给加密的日志添加密码提示信息首页显示日志缩略图

给某一日记添加js或者CSS

WordPress 在发布日志时会对过滤一些Javascript、CSS内容,所以我们无法直接把JS、CSS直接写到日志,当然我们可以通过修改主题来实现。可是如果修改主题,把JS或者CSS的内容添加到 header.php 文件中,那么博客所有的页面都会加载这些内容,这样势必会造成整个博客效率下降。所以这个时候我们可以通过 WordPress 自定义域来给某篇的日志单独加载Javascript 和CSS。文章最后再介绍一种管理WordPress自定义域的小技巧工具。

假设我们给日志单独加载JS、CSS的自定义域名称是 head_JS_CSS。那么你首先需要把下面这段代码复制到你主题根目录下的 functions.php 文件中:


function head_JS_CSS(){
    if (is_single() || is_page()) {
        global $post;
        $head_JS_CSS = get_post_meta($post->ID, 'head_JS_CSS', true);
        echo $head_JS_CSS;
    }
}
add_action("wp_head","head_JS_CSS");

现在你在添加日志的时候,在WordPress自定义域区域,创建一个新的名称为:”head_JS_CSS”自定义域,在“值”输入你要单独为这篇日志加载的 Javascript 代码或者 CSS 即可。

jQuery选择器使用详解

随着jQuery的风靡,有很多关于jQuery选择器的文章,可是很多人没有系统的学过或者总结过jQuery的选择器使用方法,本文主要跟大家讨论一下jQuery的选择器的用法,针对于不同的jQuery用户,从基础说起,带您领略jQuery强大的选择器。

在跟大家分享自己的jQuery选择器的使用方法之前,我想跟大家说一个Tip,当你使用jQuery选择器的时候,有时候我们却不一定使用jQuery的选择器里面的函数,而是要简单的返回HTML对象,如果使用getElementById之类选择出HTML对象,就比较麻烦了,再说我们强大的jQuery选择器就浪费了,在这里我通过Firebug查看了jQuery选择器返回的对象,发现原来$(“#id”)[0]就是我们要的HTML对象,比如我们要取其中的innerHTML就可以使用$()[0].innerHTML。

关于jQuery选择器

通过jQuery的参考手册 我们可以看见jQuery的选择器分为:基本、层次、简单筛选、内容、可见性筛选、属性筛选、子元素、表单以及表单及其属性,共九种选择器类型,本文主要介绍基本选择器、属性、简单筛选、内容筛选这几个常用的选择器。如果能熟练掌握这几个选择器,那么我们的jQuery选择器就已经很熟练了

jQuery基本选择器

jQuery的选择器跟CSS的选择器很接近,甚至于跟CSS的选择器统一,这样就比较容易学习,简单选择器就是我们常用的CSS的ID和Class选择器,例如下面的代码把id为world的html内容改为“Hello World!”

PHP生成RSS类:RSS.class.php

前些日子给爱墙添加了RSS订阅功能,代码是自己写的,其中使用到了一个PHP类:RSS.class.php,感觉非常方便,不敢独享,特拿出来跟大家分享。

使用方法如下:
使用方法如下:


include_once("class/RSS.class.php");//引入RSS PHP类
$RSS= new RSS("名称","地址","描述","RSS频道图标");
$RSS->AddItem("日志的标题","日志的地址","日志的摘要","日志的发布日期");
$RSS->Display();//输出RSS内容

JavaScript跨浏览器的添加删除事件绑定函数

现在浏览器太多了也使我们前端开发人员慌了手脚,今天刘洋在写《教程:编写放在收藏夹里的网页划词翻译工具》的时候,问起来绑定事件的函数,由于一直使用jQuery开发,我都差点忘记了最原始的js添加绑定事件的方法啦~抽空立马写两个函数,以备不时之需。

javascript跨浏览器添加事件绑定 bind()

IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数。

/************************************
 * 添加事件绑定
 * @param obj   : 要绑定事件的元素
 * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
 * @param fn    : 事件处理函数
 ************************************/
function bind( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

导言

之前在开发普加09年国庆中秋祝福页面复制链接功能时,遇见在Firefox,Chrome,Opera,Safari能复制链接的兼容性问题,而在近期上线的普加地图产品中使用的是Flash的flashvars来传入参数来解决了这个问题。其实开发中经常会用到复制的功能,在 IE 下通过JavaScript的window.clipboardData.setData可以简单实现复制到剪贴板功能。最后终于找到了终极解决方式:使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板,所以只要浏览器装有Flash 就可以复制内容。

Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板

Zero Clipboard的安装方法

其实也不算安装啦,就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
Zero Clipboard : [项目主页] [zip下载] [在线演示]

IE6 PNG图片不透明问题的解决方法

IE6真是前端开发人员的噩梦,就像刘洋说的:IE6一次又一次的阻碍了互联网的发展。在前几天开发的WordPress天气预报插件中使用的图片都是png格式的透明图片,由于png格式的图片比较漂亮美观,可是在IE6中png的透明效果是没有的,这样子本来设计很漂亮的页面在IE6就歇菜了,让人感觉很不爽~本文使用js的方法来解决IE6下PNG图片不透明的问题,简单实用。更多解决方法点击此处

如果我们在页面中使用的透明PNG图片不是很多,可以使用下面的代码来解决问题:

function setPng(img, w, h){
     ua = window.navigator.userAgent.toLowerCase();
     if (!/msie/.test(ua))
         return;
     imgStyle = "display:inline-block;" + img.style.cssText;
     strNewHTML = "";
     img.outerHTML = strNewHTML;
}

使用方法,在img上添加onload=”setPng(this,宽度,高度)”,如<img onload=”setPng(this,98,78)” src=”” />
如果您觉得这样的方法比较麻烦,或者页面中使用的透明png图片比较多如果手动添加很不方便的时候,可是使用下面的代码来解决问题。

主流浏览器的CSS Hack方法整理

由于不同的浏览器,比如IE6、IE7、Firefox等,对CSS的解析不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题:在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题,当然对于不同浏览器也有不同的CSS hack的方法,此处本人就整理了一些常用到CSS hack方法,分享给大家,希望对大家有用。

CSS Hack浏览器的顺序

对于不同浏览器的CSS hack是有顺序区分的,一般的书写hack的顺序是:Firefox -> IE7 -> IE6 -> 其他
当然推荐大家使用Firefox+Firebug来进行调试,注意书写的时候要尽量标准,记住封口,很多时候不封口在FF,IE7下显示正常,可是在IE6下就全部乱了~

CSS Hack整理汇总

这些方法相信很多人已经很熟悉了:比如 IE6能识别下划线”_“和星号” * “,IE7能识别星号” * “,但不能识别下划线”_“,而firefox两个都不能认识。

使用if IE hack注释解决CSS以及JS的兼容问题

IE CSS hack(更多方法)当中常用到if IE 来判断浏览器的类型,解决CSS甚至于JS的兼容性问题,之前大家可能知道if IE来解决CSS的兼容性问题,其实if IE不仅仅是用于CSS hack的使用,我们在前端开发中甚至可以使用if IE来做JS的处理,如下面的代码:

<!–[if IE 5]> <script>document.write(“仅IE5.0与IE5.5可以识别”);</script> <![endif]–>

<!–[if gte IE 5.0]><script>document.write(“IE5.0以及IE5.0以上版本都可以识别”);</script><![endif]–>

<!–[if IE 6]><script>document.write(“仅IE6可识别”);</script><![endif]–>

<!–[if lt IE 6]><script>document.write(“IE6以下版本可识别”);</script><![endif]–>

<!–[if gte IE 6]><script>document.write(“IE6以及IE6以上版本可识别”);</script><![endif]–>

<!–[if IE 7]><script>document.write(“仅IE7可识别”);</script> <![endif]–>

<!–[if lt IE 7]><script>document.write(“IE7以下版本可识别”);</script><![endif]–>

<!–[if gte IE 7]><script>document.write(“IE7以及IE7以上版本可识别”);</script><![endif]–>
下面对if IE做一下详细的解释:

cURL常用的几个PHP函数

cURL是一个功能强大的PHP库,我们可以使用PHP的cURL采用GETPOST等方式发送请求,获取网页内容以及取一个XML文件并把其导入数据库等等。本文中收集了几种常用的PHP的cURL函数,以备使用。主要的有几个PHP函数用于:GET,POST,HTTP验证,302重定向,设置cURL的代理。

1、开启PHP的cURL功能

在Windows平台下,或者使用xampp之类的集成服务器的程序,会非常简单,你需要改一改你的php.ini文件的设置,找到php_curl.dll,并取消前面的分号注释就行了。如下所示:

//取消注释,开启cURL功能
extension=php_curl.dll
Linux下面,那么,你需要重新编译你的PHP了,编辑时,你需要打开编译参数——在configure命令上加上“–with-curl” 参数。