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

E-file：Cary

Cary的最新文章：

首页--文章内容

www.fh888.com 2006-8-23 21:12:44

媒体：蓝色理想作者：HBrO
发布：Cary

前言

前段时间，我在忙着做自己的FLASH网站，其实是做来玩玩的。当初的想法是，如果能做得好，就可以考虑推广一下。但是我发现我在这方面是个绝对的白痴。然而，我当时也做了最坏的打算，就是还可以拿来给大家写点教程。今天，我算是完成了所谓的第一期工程，就开始实现我的这个写教程的想法。

目前，我要介绍的一些技术应用都在这里。今天本来打算给大家写那个FLASH+WMP播放器的制作的，觉得这个容易引起大家的兴趣。但是恰逢luzhugao正在做商业版的播放器，其代码做法我想也是大同小异，加上火山想了解我站的定位技术，就先把这个写在前面了。
废话少说，开始转入正题吧。

我们知道，在常规的HTML页面里头，点一般的链接，会实现页面的跳转，并且地址栏也跟着变化，用户想将某个页面加入收藏夹，下次打开就直接显示那个页面，而非首页。
然而，FLASH站，特别是只有一个HTML页面的那种站，它们的所谓分页可能就分布在不同的帧，或者是些LOADMOVIE之类的。为了做某些特效，不能让页面发生跳转，发生刷新，导致不管如何点分页面，刷新页面，还是会直接打开FLASH站的所谓首页，在加入收藏夹的时候，也不能定位至当前分页。如果某些时候，看到了好的文章，想直接拷贝地址发给人家，对方也不能看到相应的文章。
开始的想法：同一页面可以带有不同的参数，通过参数传递，就可以让FLASH定位至某一所谓分页。但是，问号后面的参数却不能通过FLASH的AS或者JS来修改。要修改必须重新刷新页面，以致无法实现无刷新定位。
后来在百度里搜索了“修改地址栏内容”，发现如果是"#"后面带锚点的话，是可以通过JS来修改的，并且页面也不会跳转，就连页面的位置也不移动。于是，两边的通讯都实现了，定位技术问题也就迎刃而解。

PS：发现网上说这是AJAX的应用，但是看了下关于AJAX的入门，发现跟那个核心xmlHttpRequest对象拉不上关系，只不过是无刷新而已，怎么说是AJAX的应用呢？

该技术应用的成功案例：

案例一　　案例二　　案例三

这三个地址里，不同的就是#后面的参数，当surveyID为空值时，页面定位至调查列表。surveyID有值的时候，就定位至对应的调查项目里头。也就是说，通过地址栏#后面的内容，可以准确定位到相应栏目。
另一方面，大家可以测试下FLASH点链接后，再刷新页面的情况，具体操作：

打开 http://hbro.cincn.com/cindex.htm#contents=survey
调查列表出来以后，点任意一个调查项目，此时定位在某一个调查项目了。
刷新页面，你们会发现FLASH最后并没有定位到调查首页的列表，而是具体一个项目了。这正如在论坛帖子列表里点了一个帖之后，刷新后显示的是当前的帖子，而非帖子列表。
在打开某个项目以后，把地址栏拷贝给别人打开，对方看到的也是具体的项目页面，而非首页。

由此看来，单一HTML的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站定位的目的了。

【声明】网页天堂刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何投资建议。转载请注明出处。

我也说两句

E-File帐号：用户名：密码： [注册]

评论：（内容不能超过500字，如果您不填写用户名和密码只能以游客的身份发表评论。）

*评论内容将在30分钟以后显示！

发表须知：
一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。