管理中心 | 控制面板  |  帮助中心  |  汇款方式  | 加盟代理
域名注册
DOMAIN
虚拟主机
HOSTING
数 据 库
DATABASE
网站建设
WEBSITE
自助建站
SELF-SER
网站维护
WEB-MAINT
短信业务
SHORT-NOTE
FLASH动画
FLASH
网站优化
WEB-OPT
文章中心
ARTICLES
  点击排行
[网站优化]网站被百度封了该怎.. 193 
[网站优化]Google的警告信息如.. 115 
[网站优化]如何向MSN,google.. 70 
[网页特效]不用js实现连续向上.. 60 
[网站建设]网站建设中js比较日.. 46 
[网页特效]点击图片改变网页背.. 45 
[平面知识]几种图片的格式异同 42 
[空间域名]拒绝腾讯QQ弹出迷你.. 41 
[网站优化]Seo对页面策划注意.. 36 
[网页特效]流星雨疯狂攻击鼠标 35 
[网站优化]搜索引擎优化误区(.. 33 
[网站优化]网站被百度封的七大.. 33 
[网站建设]JS等比例缩放图片代.. 31 
[网页特效]跟随鼠标变化的时钟 31 
  最新文章
[网页特效]使用的层效果—网.. 11-11 
[网页特效]各种各样有趣的按.. 11-11 
[网页特效]网页上实现应用程.. 11-11 
[网页特效]滚动超酷缓动图片.. 11-11 
[网站建设]IP地址屏蔽功能的.. 11-11 
[Flash教程]Flash as入门—-.. 11-11 
[Flash教程]Flash as入门—-.. 11-11 
[Flash教程]Flash as入门—-.. 11-11 
[网站建设]浏览器Cookie的限.. 11-11 
[网站建设]MooTools教程之定.. 11-11 
[网站建设]MooTools教程之正.. 11-11 
[网站建设]服务器IIS出错:S.. 11-10 
[空间域名]服务器更新升级的.. 11-6 
[空间域名]FTP服务器关于权.. 11-6 
 首页 > 技术文章 > AS+JS的Flash网站无刷新定位技术
AS+JS的Flash网站无刷新定位技术
时间:2008-10-5 来源:数据时代 作者: 数据·会心  

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

该技术应用的成功案例:

案例一   案例二   案例三

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

  •  打开 http://hbro.cincn.com/cindex.htm#contents=survey
  • 调查列表出来以后,点任意一个调查项目,此时定位在某一个调查项目了。
  • 刷新页面,你们会发现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站定位的目的了。

 热门关键词:网站建设 | 网站优化 | 网站维护 | 自助建站 | 域名 | 虚拟主机 | 企业邮局 | 数据时代
Copyright © 2004-2008 SJERA.COM All rights reserved  南京迅虎科技有限公司·中国 版权所有  备案编号:苏ICP备08017889号
24小时电话:025-68858607    E-mail:service@sjera.com  公司地址:珠江路88号新世界中心A座1005A    邮编:210008
编辑人员: 904900607  978744020  851031360  948119634   技术交流群:58102068  29780417