Flash(as3)+JS实现页面不刷新同时动态改变地址栏url

作者Kuma 文章分类 分类:About Codes 文章评论 1条评论 阅读次数 已被围观 3422

        事实上很久以前就想来研究这个AS3+JS如何实现页面不刷新改变地址栏的URL了。这个技术在解决全Flash网站的SEO方面有突出贡献。全Flash网站如何在地址栏地址改变的同时Flash不会重新加载进而从头播放,同时又要让Flash的内容跟地址栏的地址相关?为了解决这个问题,我在网上搜索了一下,Flash AS3和JS通信可以解决该问题。网上似乎给出了两种方法,其中一种没有深入研究,待研究后再贴出第二种方法,本文只分析一下第一种方法。

        以下转载自蓝色理想http://bbs.blueidea.com/viewthread.php?tid=2668305

—————————————华丽分割线——————————————

1. 新建一FLASH文档,保存为main.fla.,点“文件”-“发布设置”,在HTML选项卡里,看到模板的下拉菜单,选择“带FSCOMMAND跟踪的FLASH”接着点“发布按钮”。

2 .然后,在FLASH里创建四帧,四个均为关键帧,
第一帧为空,写入代码stop();
第二帧放入静态文本Page 1,帧标签为page1,
第三帧放入静态文本Page 2,帧标签为page2,
第四帧放入静态文本Page 3,帧标签为page3,
3 .插入一图层,放在最底,里头放上三个按钮。分别写上
on(release){
       gotoAndStop("page1")//跳转到指定的帧标签
       fscommand("setAddress","page1")//这是个FSCOMMAND命令,让FLASH去调用JS函数,函数将在JS里定义。
}

on(release){
       gotoAndStop("page2")
       fscommand("setAddress","page2")
}

on(release){
       gotoAndStop("page3")
       fscommand("setAddress","page3")
}

4. 文件保存后,发布一个带FSCOMMAND跟踪的HTML文件。之后,建议在格式选项卡里把HTML选项的勾去掉。为了防止大意时,以后HTML文件手动加入的代码给覆盖掉。

5. 用记事本打开main.html文件,找到//place your code here(代码放在此处),在这里输入
if(command=="setAddress"){
  document.location.hash=args//获得FLASH中FSCOMMAND传出的参数,并赋值给hash值,让地址栏在无刷新的情况下发生改变
}

6 测试HTML文件,可以看到点按钮之后,地址栏发生了改变。但是刷新页面后,FLASH显示的还是第一帧,因为在刷新页面的时候,没有一个命令让FLASH的页面发生跳转

7.为此,在main_DoFSCommand函数下面定义一个控制跳转的函数:
function setFlashPos(){
  main.TGotoLabel("_root",document.location.hash.slice(1))//让Flash跳转到地址栏#后面内容的标签名,之所以用slice(1),是因为JS读取出来的值是包含#的。所以要用slice(1)把#去掉。http://www.zhugao.cn/info/news_show.asp?id=214 有介绍TGotoLabel的用法。
}

8. 让刷新页面或者打开页面时调用该代码,就在body标签里加入onload=setFlashPos()
此时测试,就可以实现全FLASH站的无刷新地址跳转,达到FLASH站定位的目的了。

—————————————华丽分割线——————————————

上面的例子是as2.0,as3的方法差不多,js端不用修改,只需改一下as的按钮事件为as3就行了。上面的例子很简单,大家一看就会。下来介绍一个我看到的国外的一个关于as与JS通信的强大类工具包。大家可以从这里下载得到:http://nchc.dl.sourceforge.net/project/swfaddress/swfaddress/SWFAddress%202.4/swfaddress-2.4.zip。本工具包官方站点:http://www.asual.com/swfaddress/

下载工具包后解压,你会得到一份完整的工具包,里面包含了使用文档、源文件、例子、JS和AS的类。

大家可以看看效果:http://www.asual.com/swfaddress/samples/flash/

具体例子和例子源码可以查看下载包里面的samples文件夹。

分类:About Codes
标签: Flash JavaScript as3

通告: http://mouselife.net/tb.php?sc=e80ab8&id=76

【上一篇】放假了
【下一篇】凌晨碎语

评论:

  1. [回复]小松发表于 2010-01-11 14:20
    哈哈,曾经多么期望有一个flash整站啊,呵呵
    • [回复]Kuma发表于 2010-01-11 15:21
      @小松:呵呵,哥学Actionscript3.0的,Flash整站需要视觉效果好才好看,所以得有强大的美工支持才行:)

发表评论: