PS:发现网上说这是AJAX的应用,但是看了下关于AJAX的入门,发现跟那个核心xmlHttpRequest对象拉不上关系,只不过是无刷新而已,怎么说是AJAX的应用呢?
该技术应用的成功案例:
案例一 案例二 案例三
这三个地址里,不同的就是#后面的参数,当surveyID为空值时,页面定位至调查列表。surveyID有值的时候,就定位至对应的调查项目里头。也就是说,通过地址栏#后面的内容,可以准确定位到相应栏目。 另一方面,大家可以测试下FLASH点链接后,再刷新页面的情况,具体操作:
由此看来,单一HTML的FLASH页面看起来无法实现的地址跳转和定位都可以做到了。
由于这个站里头用了别的其他效果,跟这个技术混在了一块,直接以这个为实例,讲起来不方便,没针对性,为此,笔者专门写了个简单的演示文档。大家根据页面的说明进行操作。
下面介绍这里用到的两个技术点:
<html> <head> <script language="javascript"> function setPos(pos){ td1.innerText="您现在在第"+pos+"页" document.location.hash=pos }
</script> </head> <body onload="setPos(document.location.hash.slice(1));"> <a onclick="setPos(1);" style="cursor:hand">page1</a><br> <a onclick="setPos(2);" style="cursor:hand">page2</a><br> <a onclick="setPos(3);" style="cursor:hand">page3</a><br> <table> <tr> <td id="td1"> </td> <tr> </table> </body> </html>
从中可见,当你点了某个链接之后,document.location.hash修改的时候,地址栏#后面的内容会修改,并且页面的文字“在第几页”也发生了变化,但是页面却没有发生刷新。 人为刷新之后,页面显示的并非你最初打开所显示的内容,而是显示你设置过的内容。因此,只要把hash值传给FLASH,FLASH就可以根据此变量进行定位了。另一方面,FLASH也可以通过FSCOMMAND调用JS设置hash的值,为人为刷新的准确定位打下基础。
2. FLASH与JS的通讯
首先,FLASH可以通过FSCOMMAND调用JS。或者getURL("javascript:func()"),但是后者有些缺点。具体是哪些,有兴趣的可以向我了解。
测试办法:
首先,新建一个FLASH文档,在第一帧里写代码
var flashvar=1 fscommand("msgbox",flashvar)
然后,把文件保存一下,文件名为test.fla
接下来,“文件”-“发布设置”,在HTML选项卡里,看到模板的下拉菜单,选择“带FSCOMMAND跟踪的FLASH”接着点“发布按钮”
此时,在FLA文件所在目录下,你可以看到有一个SWF文件和一个HTML文件。用记事本打开HTML文件,找到//place your code here(代码放在此处),写入代码:
if(command=="msgbox"){ alert(args) }
测试HTML文件,你会看到一个显示1的提示框出来了。 把flashvar变量改成2,就显示2。 可见,通过此办法,FLASH中的flashvar的值就传给了JS。如果把alert(args)改成document.location.hash=args的话,地址栏就给改了,但是页面没跳转。
接着,就是JS调用FLASH了。测试办法如下: 在该FLASH文档中创建一个动态文本框,变量为jsvar,接着在alert(args)后面加上test.setVariable("jsvar",document.location) 可见,动态文本显示出地址栏的内容了,这是JS传给FLASH的结果。 至于这个FLASH插件的其它方法,可以参考这里。
据此,笔者开始写简单演示文档的制作过程。
1. 新建一FLASH文档,保存为main.fla
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站定位的目的了。 |