Aug
14
当门户网站频道过多的时候,并且绑定的是不同的二级子域。
这个时候就会发现,JS在整站中跨域的问题很让人恼火。
到处都是无权限。
我们会想到用iframe的方式来调用页面来实现跨域,但是那很麻烦很麻烦,而且还不好控制。
JQ中不是有跨域的解决方案吗?
NO!那个也麻烦。
flash本身就有跨域的方案,本身加入System.security.allowDomain("*");
然后写一个跨域规则的crossdomain.xml即可。
flash跨域类这么写:
package {
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.external.ExternalInterface;
import flash.system.Security;
public class FlashProxy extends Sprite{
private var _params:Object;
private var _loader:URLLoader;
private var _method:String;
private var _id:String;
private var _parse:Boolean;
private var _inited:Boolean;
private var _data:String;
private var _xml:XML;
public function FlashProxy(){
Security.allowDomain('*');
_inited = false;
_data = "";
_parse = true;
_method = URLRequestMethod.POST;
_loader = new URLLoader();
configureListeners(_loader);
}
public function load(page:String,params:Object=null):void{
if(!_inited){
showError("FlashProxy还没有初始化!");
}
if(page == null || page == undefined){
showError("page参数为必须的!");
return;
}
var vars:URLVariables = new URLVariables();
vars.tmp = Math.random();
if(params != null){
for(var key in params){
if(key == "tmp"){
continue;
}
vars[key] = params[key];
}
}
_loader.dataFormat = URLLoaderDataFormat.TEXT;
var request:URLRequest = new URLRequest(page);
request.method = _method;
request.data = vars;
_loader.load(request);
}
public function setParse(value:Boolean):void{
_parse = value;
}
public function setMethod(value:String):void{
if(value == null || value == undefined){
return;
}
value = StringUtil.trim(value);
if(value.toLocaleUpperCase() == URLRequestMethod.POST || value.toLocaleUpperCase() == URLRequestMethod.GET){
_method = value.toLocaleUpperCase();
}
}
public function getData():String{
return _data;
}
private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE, completeHandler);
dispatcher.addEventListener(Event.OPEN, openHandler);
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}
private function completeHandler(event:Event):void {
_data = _loader.data;
if(_parse){
try{
_xml = new XML(_data);
}catch(error:Error){
_parse = false;
_xml = null;
Tracer.debug("xml解析错误!");
}
}
ExternalInterface.call(_id+".onComplete");
}
private function openHandler(event:Event):void {
ExternalInterface.call(_id+".onOpen");
}
private function progressHandler(event:ProgressEvent):void {
ExternalInterface.call(_id+".onProgress",event.bytesLoaded,event.bytesTotal);
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
showError("读取失败!\n 不能跨域访问,可能是你在web服务端根目录下没有放置crossdomain.xml文件!");
}
private function httpStatusHandler(event:HTTPStatusEvent):void {
showError("读取失败!\n HTTP错误代码为:"+event.status);
}
private function ioErrorHandler(event:IOErrorEvent):void {
showError("读取失败!\n 可能是因为下列原因:\n 1.网络忙,请稍候重试!\n 2.访问的web服务端没有开启!");
}
public function alert(msg:String):void{
navigateToURL(new URLRequest(msg));
}
public function showError(msg:String):void{
ExternalInterface.call(_id+".onError",msg);
}
}
}
当然,这个是较简单的一个跨域类。
APMServ的作者在其博客上也发了一个JS通过FLASH来跨域的方案,很全面。
参考地址是:
这个时候就会发现,JS在整站中跨域的问题很让人恼火。
到处都是无权限。
我们会想到用iframe的方式来调用页面来实现跨域,但是那很麻烦很麻烦,而且还不好控制。
JQ中不是有跨域的解决方案吗?
NO!那个也麻烦。
flash本身就有跨域的方案,本身加入System.security.allowDomain("*");
然后写一个跨域规则的crossdomain.xml即可。
flash跨域类这么写:
package {
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.external.ExternalInterface;
import flash.system.Security;
public class FlashProxy extends Sprite{
private var _params:Object;
private var _loader:URLLoader;
private var _method:String;
private var _id:String;
private var _parse:Boolean;
private var _inited:Boolean;
private var _data:String;
private var _xml:XML;
public function FlashProxy(){
Security.allowDomain('*');
_inited = false;
_data = "";
_parse = true;
_method = URLRequestMethod.POST;
_loader = new URLLoader();
configureListeners(_loader);
}
public function load(page:String,params:Object=null):void{
if(!_inited){
showError("FlashProxy还没有初始化!");
}
if(page == null || page == undefined){
showError("page参数为必须的!");
return;
}
var vars:URLVariables = new URLVariables();
vars.tmp = Math.random();
if(params != null){
for(var key in params){
if(key == "tmp"){
continue;
}
vars[key] = params[key];
}
}
_loader.dataFormat = URLLoaderDataFormat.TEXT;
var request:URLRequest = new URLRequest(page);
request.method = _method;
request.data = vars;
_loader.load(request);
}
public function setParse(value:Boolean):void{
_parse = value;
}
public function setMethod(value:String):void{
if(value == null || value == undefined){
return;
}
value = StringUtil.trim(value);
if(value.toLocaleUpperCase() == URLRequestMethod.POST || value.toLocaleUpperCase() == URLRequestMethod.GET){
_method = value.toLocaleUpperCase();
}
}
public function getData():String{
return _data;
}
private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE, completeHandler);
dispatcher.addEventListener(Event.OPEN, openHandler);
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}
private function completeHandler(event:Event):void {
_data = _loader.data;
if(_parse){
try{
_xml = new XML(_data);
}catch(error:Error){
_parse = false;
_xml = null;
Tracer.debug("xml解析错误!");
}
}
ExternalInterface.call(_id+".onComplete");
}
private function openHandler(event:Event):void {
ExternalInterface.call(_id+".onOpen");
}
private function progressHandler(event:ProgressEvent):void {
ExternalInterface.call(_id+".onProgress",event.bytesLoaded,event.bytesTotal);
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
showError("读取失败!\n 不能跨域访问,可能是你在web服务端根目录下没有放置crossdomain.xml文件!");
}
private function httpStatusHandler(event:HTTPStatusEvent):void {
showError("读取失败!\n HTTP错误代码为:"+event.status);
}
private function ioErrorHandler(event:IOErrorEvent):void {
showError("读取失败!\n 可能是因为下列原因:\n 1.网络忙,请稍候重试!\n 2.访问的web服务端没有开启!");
}
public function alert(msg:String):void{
navigateToURL(new URLRequest(msg));
}
public function showError(msg:String):void{
ExternalInterface.call(_id+".onError",msg);
}
}
}
当然,这个是较简单的一个跨域类。
APMServ的作者在其博客上也发了一个JS通过FLASH来跨域的方案,很全面。
参考地址是:
引用
http://blog.s135.com/ajaxcdr/
Aug
10
今天彪哥一时兴起,在BBS上转来转去。
结果用他那过时的IE6在首页发现,首页半天都加载不下来。
首页只有一个阿里妈妈的远程动画和些图片以及JS。
根据以往经验来看,就是这个flash的问题。
因为在IE6这个单线程的浏览器中,来进行多线程的操作,那简直是痛苦。
最后不得不把那动画换成了图片。
IE6快死掉吧。
结果用他那过时的IE6在首页发现,首页半天都加载不下来。
首页只有一个阿里妈妈的远程动画和些图片以及JS。
根据以往经验来看,就是这个flash的问题。
因为在IE6这个单线程的浏览器中,来进行多线程的操作,那简直是痛苦。
最后不得不把那动画换成了图片。
IE6快死掉吧。
Jul
21
最近在研究怎样使blog中充斥更多一点的SNS元素。
无意中发现了JQ的这个自定义类。
这些效果都是比较流行的,集合这么全的尚属少见。
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。
jQuery.Switchable能实现什么样的效果?看图:
Tabs

Slide

Scrollable

Horizontal Accordion

Taobao.com

下载地址:http://www.blueidea.com/articleimg/2010/03/7434/switchable/demos/
无意中发现了JQ的这个自定义类。
这些效果都是比较流行的,集合这么全的尚属少见。
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。
jQuery.Switchable能实现什么样的效果?看图:
Tabs
Slide
Scrollable
Horizontal Accordion
Taobao.com
下载地址:http://www.blueidea.com/articleimg/2010/03/7434/switchable/demos/
Jul
12
xheditor是建立在JQ上的一个富文本编辑器。
今天就拿它来做了一个网站,但是却需要一个内容分页的功能。
最后决定在xheditor中加入一个分页符按钮来实现这个功能。
在xheditor中,我不用封装好的版本,而选用源代码版的xheditor-zh-cn.js
在xheditor-zh-cn.js中加入
在 var toolsThemes={ 中的 full: 中加入 Custom 一项
在 switch(cmd)中加入
当然,样式也自然是要改的
我们打开我选择的样式xheditor_skin/vista中的ui.css文件。
加入:
我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。
最后打开编辑器,就可以看到一个下拉框了,点击里面的分页,即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层,通过JS来操作显示,其实是一种伪分页。当然,也可以用语句来操作。
那都是看各自的手段了。
今天就拿它来做了一个网站,但是却需要一个内容分页的功能。
最后决定在xheditor中加入一个分页符按钮来实现这个功能。
在xheditor中,我不用封装好的版本,而选用源代码版的xheditor-zh-cn.js
在xheditor-zh-cn.js中加入
var customList=[{s:'分页标签',v:'$show_page$',t:'分页标签'},{s:'Flv 视频',v:'[Flv width="400" height="300"]视频地址[/Flv]',t:'Flv视频'},{s:'插入引用',v:'[Quote title="引用"]引用代码[/Quote]',t:'运行代码'},{s:'插入代码',v:'[Code]运行代码
',t:'运行代码'}];[/code]在 var toolsThemes={ 中的 full: 中加入 Custom 一项
在 switch(cmd)中加入
case 'custom':
_this.showMenu(customList,function(v){_this.pasteText(v);});
break;
这一项。_this.showMenu(customList,function(v){_this.pasteText(v);});
break;
当然,样式也自然是要改的
我们打开我选择的样式xheditor_skin/vista中的ui.css文件。
加入:
.xhe_vista span.xhEdtSeparator {display:block;height:20px;width:4px;background:url(img/icons.gif) no-repeat -692px 0;margin:0 2px}
.xhe_vista span.xhEdtBtnCustom {background-position:-640px 0}
.xhe_vista span.xhEdtBtnCustom {background-position:-640px 0}
我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。
最后打开编辑器,就可以看到一个下拉框了,点击里面的分页,即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层,通过JS来操作显示,其实是一种伪分页。当然,也可以用语句来操作。
那都是看各自的手段了。
Jun
29
一个拥有许多图片以及较多用户的网站,面临的压力会较大,并发连接数我们且略过。就拿下载图片时产生的带宽影响来说,就是一个很需要解决的问题。
所以,我们得做一个图片缓加载的功能。
用户打开网站的瞬间,浏览器显示区以外的图片,我们都暂时不去加载和显示,这个对SEO无害吧(我们肯定会选择一个小图片进行替换,不会空着的)。
这效果用JQ即可完美解决,虽然别的网站是自己写的类。
代码如下:
当然,我没去获取分辨率大小,这个以后实际用到再去做
所以,我们得做一个图片缓加载的功能。
用户打开网站的瞬间,浏览器显示区以外的图片,我们都暂时不去加载和显示,这个对SEO无害吧(我们肯定会选择一个小图片进行替换,不会空着的)。
这效果用JQ即可完美解决,虽然别的网站是自己写的类。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>100){
// 滚动高度超过100时,加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>100){
// 滚动高度超过100时,加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
当然,我没去获取分辨率大小,这个以后实际用到再去做







