Some print.
Some print.
分类归档: Collect Page 1 of 10

混合版马里奥(super mario bros crossover)

By19.Published on2010-04-18.

这个就是网络视频流传的“混沌罗版本的超级玛丽”，正确的名称应该是Super Mario Bros Crossover———混合版马里奥。

包括塞尔达的LINK、混沌罗、洛克人、恶魔城好像还有一个是银河战士吧，这个比较眼生。我个人感觉就小游戏而言已经是极品了，而且加上我们小时候的各种游戏人物乱入在一起，值得玩玩看。

建议在游戏一开始设置按键，并且里面也有默认的按键操作说明。

{ 0 comments } { Tags: }

浏览AJAX历史记录的三种方法

By19.Published on2009-05-6.

浏览AJAX历史记录的三种方法：jQuery插件+隐藏iframe+hash（锚点）参数

以前觉得AJAX更新后想激活浏览器的“前进~后退”按钮再浏览历史记录应该不好实现，所以一直没关注这方面的东西，前几天一哥们问起才想把这块搞搞，其实代码很简单，主要是实现思路，这里提供的例子里用了三种实现方法。

jQuery插件+隐藏iframe+hash（锚点）参数三种浏览AJAX历史记录实例下载

NEW~再提供一个例子，结合了锚点、iframe等方法，在各种浏览器下测试通过。

新提供的例子中预留了nowHashHaveChange函数做每次用户点击前进后退后进行其他操作的扩展：

1
2
3

function nowHashHaveChange() {
	// alert("nowHashHaveChange");
}

对于我的站点一开始的读取锚点内容，需要你每次页面加载成功之后判断有无锚点，有的话就读取锚对应的内容，这部分需求不同进行的操作也不同需要自己根据自己站点的情况做修改，故不提供这部分相关内容。

以下是使用iframe方式具体思路，这是我找到的第一种实现思路：（以下一段照抄网络搜索内容 – 。-）

iframe内容改变可以激活控制栏的前进后退按钮，用户点击了浏览器上的“前进/后退”功能按纽时，父页面不发生化，但会改变iframe的URL，在iframe所链接的页面中，每次重新读取页面都会导致运行一段javascript程序，程序的功能根据当前URL中的参数去调用父页面的一个用于记取历史的方法，方法的功能就是根据iframe中传递过来的参数去返回用来记录页面信息的数组中相应的历史页面信息。

具体代码，首先页面中要有一个iframe：

1

<iframe id="ajax_history_iframe" height="0px" frameborder="no" scrolling="no" src="ajaxhistory.php?historyID=0"></iframe>

之后建立一个队列用来存储每次AJAX更新的内容，比如我每次都要更新：

1

<div id="for_ajax_history"></div>

这个DIV中的内容，则写一段JS先把第一次页面打开的内容存储进去：

1
2
3
4
5

var ajax_list = new Array();
window.onload = function() {
//第一次打开需要以后用AJAX更新的内容先存入ajax_list中
ajax_list.push(document.getElementById("for_ajax_history").innerHTML);
}

之后我们执行AJAX，得到需要更新的数据，先不要去替换页面的内容，先把这部分数据存储到ajax_list中：

1
2

//ajax_callback就类似于AJAX成功后得到的数据内容 先存入array中
ajax_list.push(ajax_callback);

然后更改iframe的地址：

1

document.getElementById('ajax_history_iframe').src="ajaxhistory.php?historyID="+(ajax_list.length-1);

iframe访问ajaxhistory.php，ajaxhistory.php具体只有几句代码：

1
2
3
4

< ?php $historyID=$_GET["historyID"];?>
<script type="text/javascript">
   parent.ajax_gethistory(< ?php echo $historyID; ?>);
</script>

就是调用父页面ajax_gethistory函数：

1
2
3
4
5
6
7
8
9

//判断是否是第一次 第一次访问iframe回调不执行ajax_gethistory 可以防止很多异常错误发生
var ifFirst = true;
 
function ajax_gethistory(id) {
	if (!ifFirst && ajax_list[id] != null) {
		document.getElementById("for_ajax_history").innerHTML = ajax_list[id];
	}
	ifFirst = false;
}

意思就是说把刚刚AJAX得到的并且存入队列内容付给应该更新的这个for_ajax_history的DIV，PHP文件相当简单，就是根据传过来的ID输出这段JS，你可以随意改变成其他类型的文件（例如html或java）。

此时就完成了AJAX的更新，并且激活了导航栏的“前进后退”，之后你再点击前进后退就会改变iframe从而每次都调用父页面的ajax_gethistory来浏览历史内容。

只是ARRAY添加的越多是否会对客户端的性能造成影响？（也许只是感觉是这样而已，毕竟就算你打开一百个页面的内容也到不了几兆），iframe的方法在GOOGLE和APPALE的浏览器下会有问题，iframe不会激活GOOGLE和APPALE的前进后退按钮，所以有了以下的锚点法。

锚点法是根据浏览器的锚点(hash)改变，加载数据。用设置监听的方法来判断每次前进后退按钮的事件，相应的内容看实例吧。

各种浏览器的改变锚点、改变iframe对导航栏前进后退的操作不尽相同，判断起来很纠结，如果你要自己写一个比较完善的代码，建议把锚点法和iframe整合在一起使用（可以参考我上面新提供的那个例子，整合了锚点和iframe方法的历史记录浏览）。

至于如果你用JQUERY，很好~有相关插件可用，具体使用请看例子。

(全文 …)

{ 61 comments } { Tags: }
Page 1 of 10123456...Last »