动威9号-Flex、Flash技术探讨

js跨域的最终武器flash

Fri, 13 Aug 2010 22:12:08 +0000

当门户网站频道过多的时候，并且绑定的是不同的二级子域。
这个时候就会发现，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/

Tags - js跨域 , flash跨域

JS与FLASH这对冤家

Tue, 10 Aug 2010 13:21:09 +0000

今天彪哥一时兴起，在BBS上转来转去。
结果用他那过时的IE6在首页发现，首页半天都加载不下来。
首页只有一个阿里妈妈的远程动画和些图片以及JS。
根据以往经验来看，就是这个flash的问题。
因为在IE6这个单线程的浏览器中，来进行多线程的操作，那简直是痛苦。
最后不得不把那动画换成了图片。
IE6快死掉吧。
Tags - js , flash

jQuery.Switchable类

Wed, 21 Jul 2010 14:59:10 +0000

最近在研究怎样使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/
Tags - jquery , switchable , tabs , slide , scrollable

xheditor添加分页功能

Mon, 12 Jul 2010 15:51:05 +0000

xheditor是建立在JQ上的一个富文本编辑器。
今天就拿它来做了一个网站，但是却需要一个内容分页的功能。
最后决定在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;

这一项。

当然，样式也自然是要改的
我们打开我选择的样式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}

我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。

最后打开编辑器，就可以看到一个下拉框了，点击里面的分页，即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层，通过JS来操作显示，其实是一种伪分页。当然，也可以用语句来操作。
那都是看各自的手段了。
Tags - xheditor , xheditor分页 , xheditor自定义按钮 , xheditor分页符

JQ来打造网站图片延迟载入效果

Tue, 29 Jun 2010 10:04:57 +0000

一个拥有许多图片以及较多用户的网站，面临的压力会较大，并发连接数我们且略过。就拿下载图片时产生的带宽影响来说，就是一个很需要解决的问题。
所以，我们得做一个图片缓加载的功能。

用户打开网站的瞬间，浏览器显示区以外的图片，我们都暂时不去加载和显示，这个对SEO无害吧(我们肯定会选择一个小图片进行替换，不会空着的)。

这效果用JQ即可完美解决，虽然别的网站是自己写的类。

代码如下：

bearjia

默认显示区的图片

延迟载入的图片

当然，我没去获取分辨率大小，这个以后实际用到再去做
Tags - jq , 图片延迟载入

用jQuery来打造tips提示效果

Mon, 28 Jun 2010 03:16:28 +0000

见到不少的游戏网站上都有鼠标悬停显示提示内容的效果
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：

代码如下：
样式----------------------------------

JS脚本----------------------------------

HTML代码------------------------------

这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。
Tags - jquery , tips提示效果 , tips

js 时间倒计时代码

Thu, 24 Jun 2010 06:23:26 +0000

前几日做的要发宝团购网站中需要用到了时间的倒计时，决定选择用JS和FLASH来实现，最后敲定使用JS。
原因无二，JS的代码量小，相比更效率。
首先定义一个函数left，由程序来输出剩余时间，以秒为单位。
当然，这个时间可是随时变化着的，必须加一个setInterval计时器。

Tags - js时间倒计时 , js倒计时

js来输出日期

Sat, 19 Jun 2010 11:32:34 +0000

js来输出日期代码如下：

function tick() { var today = new Date(); theday =[today.getMonth()+1]+"-" +today.getDate(); for(i=0;i<=2;i++){ var menu=document.getElementById("sb"+i); menu.innerHTML = theday; } } tick();

输出到页面上的ID为SB[0-i]的元素中
后来发现这样的做法只适合动态输出的页面元素
而定死的元素这样做就极其麻烦。

后来干脆就直接将所有的ID都统一为一个值，然后通过数组的方式来输出，那样即可完美解决。
Tags - js , 日期

js和select控件的交互操作

Fri, 18 Jun 2010 01:32:00 +0000

公司的论坛需要频道页，上面涉及到了一些小功能的增加。
用到了较多的select控件来控制一些搜索之类的。级联倒是没用到，基本的操作做下记录

JS取select中option的值
var sel = document.getElementById("waterpost");
var m=sel.options[sel.selectedIndex].value;

取select中option的文字
var sel = document.getElementById("waterpost");
var m=sel.options[sel.selectedIndex].text;

js改变form表单中action地址

很简单，就是如此
document.getElementById("bearpost").action="thread.php?fid=2&modelid=20";

js检查form表单中的值
if(document.bearpost.waterpost.value == "0"){
    alert("请选择搜索性别！");
    return false;
    }
  }
判断表单bearpost中name为waterpost的控件为0就弹出警告
form则要写入 onSubmit="return CheckForm();"来促发事件

那JS如何改变选中项的值呢？
objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");
对象一样用getElementById来获得
Tags - select , option , selectedindex , objselect , getelementbyid

传说能打败flash的jQuery效果小集合

Thu, 13 May 2010 05:03:49 +0000

1. 流感导航菜单
下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。

2. 转花灯
Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。

3. 拉洋片
拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。

4. jQuery Quicksand 插件
这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。

5. 导航滑块
这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。

6. 文字的移动纹理
在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。

7. jDiv: jQuery 导航 Tab
一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。

8. 基于 CSS3 和 jQuery 的半透明导航系统
鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。

9. 云台式拉洋片
常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。

10. SlideDeck
SlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。

Tags - jquery , 效果