zlr
- 浏览: 215495 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (143)
- java (13)
- mongodb (15)
- linux (31)
- mysql (2)
- cache (1)
- Android (3)
- lucene (2)
- javascript (9)
- php (13)
- 人生 (2)
- solr (7)
- 跨域iframe (1)
- 统计学 (1)
- redis (0)
- amazon aws (2)
- 国内比较便宜的vps (1)
- nginx (5)
- sns api应用 (1)
- api (1)
- postfix (1)
- nodejs (1)
- gitlab (1)
- myeclipse (1)
- matlab (3)
- ubuntu (2)
- stardict (1)
- cdn (1)
- lajp (1)
- workerman (1)
- tensorflow (1)
- 协同推荐算法 (3)
- html5 (1)
- extensions (3)
- Rome (1)
- 正则 (1)
- EBS (1)
- python (5)
- https (1)
- iptables (1)
- facebook (0)
- ImageMagick (0)
- elasticsearch (1)
- Flask (1)
- wordpress (0)
- kubernetes (0)
最新评论
-
三尺寒冰：
怎么实现排序的？分析一下
php mongodb 实现group 并按照某字段排序
<?php
if(!isset($_REQUEST['page'])){
$page = 1;
}
else{
$page = intval($_REQUEST['page']);
}
if(isset($_REQUEST['ajaxload'])){
echo "第{$page}页的内容";
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 修改浏览器url而不刷新页面</title>
<script type="text/javascript">
var domLoaded = function(){
if(ua != null && ua[1] < 10){
alert('您的浏览器不支持');
return ;
}
if(location.href.indexOf("?") > -1){
var urlparts = location.href.match(/(.+?)\?.+/i);
var urlbase = urlparts[1];
}
else{
var urlbase = location.href;
}
var page = <?php echo $page;?>;
var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);
var content = document.getElementById("content");
var loading = document.getElementById("loading");
window.history.replaceState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + (page > 1 ? '?page=' + page : '' )
);
var ajax = new XMLHttpRequest();
var ajaxCallback = function(){
if(ajax.readyState == 4){
loading.style.display = 'none';
content.innerHTML = ajax.responseText;
window.history.pushState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + "?page=" + page
);
next.href = urlbase + "?page=" + (page + 1);
}
};
var next = document.getElementById('next');
var nextClickEvent = function(event){
if(loading.style.display != 'block'){
loading.style.display = 'block';
page++;
ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
ajax.onreadystatechange = ajaxCallback;
ajax.send('');
event.preventDefault();
}
};
next.addEventListener('click', nextClickEvent, false);
var popstate = function(){
content.innerHTML = history.state.content;
page = history.state.page;
};
window.addEventListener('popstate', popstate, false);
};
try{
window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
alert('您的浏览器不支持');
}
</script>
</head>
<body>
<p id="content">
<?php echo "第{$page}页的内容";?>
</p>
<p>
<a id="next" href="?page=<?php echo $page+1;?>">下一页</a>
</p>
<div id="loading" style="display:none;">
加载中
</div>
</body>
</html>
出处：
http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html
if(!isset($_REQUEST['page'])){
$page = 1;
}
else{
$page = intval($_REQUEST['page']);
}
if(isset($_REQUEST['ajaxload'])){
echo "第{$page}页的内容";
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 修改浏览器url而不刷新页面</title>
<script type="text/javascript">
var domLoaded = function(){
if(ua != null && ua[1] < 10){
alert('您的浏览器不支持');
return ;
}
if(location.href.indexOf("?") > -1){
var urlparts = location.href.match(/(.+?)\?.+/i);
var urlbase = urlparts[1];
}
else{
var urlbase = location.href;
}
var page = <?php echo $page;?>;
var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);
var content = document.getElementById("content");
var loading = document.getElementById("loading");
window.history.replaceState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + (page > 1 ? '?page=' + page : '' )
);
var ajax = new XMLHttpRequest();
var ajaxCallback = function(){
if(ajax.readyState == 4){
loading.style.display = 'none';
content.innerHTML = ajax.responseText;
window.history.pushState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + "?page=" + page
);
next.href = urlbase + "?page=" + (page + 1);
}
};
var next = document.getElementById('next');
var nextClickEvent = function(event){
if(loading.style.display != 'block'){
loading.style.display = 'block';
page++;
ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
ajax.onreadystatechange = ajaxCallback;
ajax.send('');
event.preventDefault();
}
};
next.addEventListener('click', nextClickEvent, false);
var popstate = function(){
content.innerHTML = history.state.content;
page = history.state.page;
};
window.addEventListener('popstate', popstate, false);
};
try{
window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
alert('您的浏览器不支持');
}
</script>
</head>
<body>
<p id="content">
<?php echo "第{$page}页的内容";?>
</p>
<p>
<a id="next" href="?page=<?php echo $page+1;?>">下一页</a>
</p>
<div id="loading" style="display:none;">
加载中
</div>
</body>
</html>
出处：
http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html
分享到：
发表评论
-
workerman PHP socket 服务器框架
2015-12-17 14:25 802http://www.workerman.net/ wor ... -
CentOS6.5 下编译安装php-5.6.3.tar.gz
2015-09-15 15:54 2098一、安装相关依赖库 yum -y install gc ... -
php 添加mongodb扩展
2014-04-30 17:03 767PHP MongoDB 扩展安装 [root@a5139 ~] ... -
nginx添加php basic验证
2014-07-16 10:37 612几种方式： 1.命令 http://www.centos.b ... -
使用PHP 给网站 生成快照图片和缩略图
2012-06-07 10:21 1959使用PHP 给网站 生成快 ... -
使用Imagick来”resize” 和 “crop” GIF动画
2012-03-23 19:32 1518http://www.cnblogs.com/analyzer ... -
php bmp图片格式转化png
2012-03-21 13:38 1670有gd库不支持bmp格式的图片缩放，裁剪，所以可以通过改变图片 ... -
php 截取固定图片大小
2012-03-14 18:19 23601.创建iamge处理类 <?php include_ ... -
crontab执行不了php的解决方法
2012-03-12 18:26 3579用crontab跑php程序时，如 ... -
php mongodb 实现group 并按照某字段排序
2012-02-27 17:13 7680require_once ('../Config.class. ... -
php 国际化
2012-02-16 18:47 1403PHP的gettext用法 gettext ... -
php报错启动配置
2011-10-13 13:32 2194PHP 报错信息 2008年11月22 ...
相关推荐
如何在不刷新网页面的情况下,修改浏览器地址栏URL地址.zip
修改这个页面内容提交后,iframe 中呈现的页面并没有变化. 原因 iframe的src的值发生改变,才会刷新iframe里面的内容. 所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src的值一直没变.所以不...
有一次在上**网的时候，发现登陆、注册动画... 在不刷新页面的前提下显示改变浏览器地址栏中的URL。 3. 添加了当用户单击浏览器的后退按钮时触发的事件。 通过以上三点，可以实现在不刷新页面的前提下动态改变浏览器地
1. 可以无刷新改变页面内容，但无法改变页面URL 2. hash的方式不能很好的处理浏览器的前进、后退等问题 为了解决传统ajax带来的问题，HTML5里加强了history API，加入了pushState、replaceState接口和popstate事件。...
HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。 与传统的AJAX的区别 传统的ajax有如下的问题： 1、可以无刷新改变页面内容，但无法改变页面URL 2、...
-刷新方式：单页面页面局部更改或刷新，多页面整页刷新 -url模式：单页面 a.com/#/pageone 多页面 a.com/pageone.html -用户体验：单页面页面切换快，用户体验良好，多页面加载缓慢，流畅度不够，用户体验较差 -...
傲游3浏览器内置云端广告过滤系统，强大而易用，确保用户在浏览网页时不受任何广告的骚扰。 傲游3浏览器界面简洁美观，布局合理。傲游3功能丰富，拥有在线收藏、鼠标手势、广告过滤、智能地址栏、多重搜索、页面...
循环重启软件运行此项是为了和刷新ADSL一起配合产生独立IP,因为每个浏览器都有Cookies,关闭浏览器就可以彻底清除Cookies产生独立访客(UV)了。如果同时选择了最小化启动程序可以用全局快捷键Ctrl+Alt+空格解除循环。...
AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。 现代JavaScript包含fetch API，该API为我们提供了一种纯JavaScript方式来发送AJAX请求。 让我们看一下如何通过获取发出...
8.4.html 获取location对象的属性值并刷新页面。 8.5.html 包含链接的文档。 8.6.html 包含链接的文档打开的目标文档。 8.7.html 清空文档的内容。 8.8.html 是否调用close()方法的区别。 8.9....
重定向后在浏览器地址栏上会出现重定向页面的URL 例:在servlet中重定向 public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { response....
所有导航都已完成，无需刷新即可更改浏览器 URL 页面（HTML5 “onpopstate”事件），页面内容用Javascript显示。 页面首次加载时访问 我们得到一个包含所有声音数据（声音标题、描述、uri...）的 JSON， 我们将...
该技术包括阻止正常的链接行为、手动更改浏览器 url 以及在页面中手动注入新内容。 这样就不会有浏览器“硬刷新”了。 以下是用户单击链接时发生的情况的演练：检查链接是否有效且符合 PJAX 条件，如果是，则阻止...
然后修改src任何.re文件，并刷新页面以查看更改。使用服务器运行项目要与webpack开发服务器一起运行，请运行npm run server并在浏览器中查看 。 在此环境中运行可提供热重载和路由支持。 只需编辑并保存文件，...
使用在线生成器生成的CKEditor 5编辑器该存储库显示了由“生成的CKEditor 5编辑器构建快速开始在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件： 用正确的令牌，websocket和上载URL端点填充对话框...
-Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...
5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式（值） 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...
在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件： 用正确的令牌，websocket和上载URL端点填充对话框。 如果您还没有这些或不知道它们的含义，请。 复制URL并共享或粘贴到另一个选项卡中，以...
使用在线生成器生成的CKEditor 5编辑器该存储库显示了由生成的CKEditor 5编辑器版本快速开始在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件： 使用正确的令牌，websocket和上载URL端点填充对话框...
在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件： 用正确的令牌，websocket和上载URL端点填充对话框。 如果您还没有这些或不知道它们的含义，请。 复制URL并共享或粘贴到另一个选项卡中，以...