首页 » 我的收集 » 网络大杂绘 » AS+JS的Flash网站无刷新定位技术

AS+JS的Flash网站无刷新定位技术

下面介绍这里用到的两个技术点:
1. JS修改,读取地址栏内容

<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站定位的目的了。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

引用:0

下面所列的是引用到本博客的链接
AS+JS的Flash网站无刷新定位技术 来自 Design4U.cn
顶部