zlr
- 浏览: 226016 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (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 863http://www.workerman.net/ wor ... -
CentOS6.5 下编译安装php-5.6.3.tar.gz
2015-09-15 15:54 2148一、安装相关依赖库 yum -y install gc ... -
php 添加mongodb扩展
2014-04-30 17:03 805PHP MongoDB 扩展安装 [root@a5139 ~] ... -
nginx添加php basic验证
2014-07-16 10:37 657几种方式： 1.命令 http://www.centos.b ... -
使用PHP 给网站 生成快照图片和缩略图
2012-06-07 10:21 2030使用PHP 给网站 生成快 ... -
使用Imagick来”resize” 和 “crop” GIF动画
2012-03-23 19:32 1576http://www.cnblogs.com/analyzer ... -
php bmp图片格式转化png
2012-03-21 13:38 1716有gd库不支持bmp格式的图片缩放，裁剪，所以可以通过改变图片 ... -
php 截取固定图片大小
2012-03-14 18:19 24021.创建iamge处理类 <?php include_ ... -
crontab执行不了php的解决方法
2012-03-12 18:26 3627用crontab跑php程序时，如 ... -
php mongodb 实现group 并按照某字段排序
2012-02-27 17:13 7799require_once ('../Config.class. ... -
php 国际化
2012-02-16 18:47 1453PHP的gettext用法 gettext ... -
php报错启动配置
2011-10-13 13:32 2229PHP 报错信息 2008年11月22 ...
相关推荐
对于不支持 pushstate 的浏览器，一律修改 href 跳转页面，等同于直接访问 URL。 示意图： 1. 用户点击某个按钮，触发 JavaScript 事件 2. JavaScript 事件处理函数使用 pushState 或 replaceState 方法修改当前 ...
如何在不刷新网页面的情况下,修改浏览器地址栏URL地址.zip
本文主要介绍了如何使用JavaScript技术在不刷新页面的情况下实现浏览器的前进后退功能，特别涵盖了HTML5的解决方案以及针对老旧浏览器的兼容性写法。在进行Web开发时，能够实现无刷新的页面浏览能够极大地提升用户...
在现代Web开发中，提供无刷新页面更新和历史记录管理是一项重要的需求，特别是在单页应用程序（SPA）中。H5，即HTML5，引入了一些新特性来帮助开发者实现这一目标，其中最关键的是History API和PushState方法。接...
虽然不是JavaScript方法，但可以通过在HTML中插入一个`meta`标签并动态修改其`http-equiv`属性来刷新页面。这通常与JavaScript结合使用： ```html ``` 然后在JavaScript中，你可以改变`content`的值来触发刷新： ``...
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）和CefSharp库来创建一个功能丰富的浏览器应用，其中包括Tab分页、文件下载、收藏、刷新、删除以及新窗口等核心功能。CefSharp是一个.NET...
这种方法可以通过直接修改 `document.URL` 来刷新页面，但其实现方式与 `location.reload()` 等方法相似，并没有本质区别。 ```javascript // 重新加载页面 document.URL = location.href; ``` #### 7. 页面自动...
例如，以下代码将在5秒后刷新页面： ```html <meta http-equiv="refresh" content="5;URL='http://example.com'" /> ``` 这里，“5”表示间隔时间（单位为秒），'http://example.com'是刷新后跳转的URL。如果不...
这是一种比较少见的方法，通过直接修改`document.URL`属性来达到刷新页面的目的。其实现方式类似于`location=location`。 ```javascript document.URL = location.href; ``` ### HTML Meta标签自动刷新页面 除了...
在多框架页面中，如果需要在服务器端代码执行后刷新特定框架，可以使用`window.location.href`，因为它允许你直接更改某个框架的URL，而不仅仅是整个页面： ```csharp // 示例代码在frameRight中刷新页面 ...
该方法通过在服务器端生成一段JavaScript代码，利用`window.location.href`属性来改变浏览器的URL，从而达到刷新页面的效果。 ```csharp private void Button2_Click(object sender, System.EventArgs e) { ...
1. AJAX：异步通信技术，使得浏览器可以不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 2. JSON：轻量级的数据交换格式，便于服务器向客户端传递数据。 3. DOM操作：JavaScript可以操作DOM元素，...
在局部刷新场景下，JavaScript可以通过修改DOM元素的属性（如`innerHTML`、`src`等）来更新页面的特定区域，而无需请求整个页面。 示例代码中展示了如何使用JavaScript监听按钮点击事件，获取表单输入值，并通过...
无刷新页面分页效果是一种常见的用户体验优化技术，它允许用户在浏览网页时无需等待整个页面重新加载即可切换页面内容，通常应用于数据量较大、需要分页显示的情况，如论坛、电商产品列表等。这种效果主要依赖于前端...
【C# 用WebBrowser实现的多页面浏览器】是一个基于C#编程语言的项目，它利用内置的WebBrowser控件创建了一个支持多个标签页的浏览器应用程序。WebBrowser控件是.NET Framework提供的一种组件，允许开发者在Windows...
这样做的好处是用户可以在不刷新页面的情况下，看到URL的变化，从而提升用户体验。 ##### 使用示例代码解析 给定的示例代码中，开发者使用了HTML5的History API以及jQuery来实现“禁止浏览器后退”的功能。 ```...
4. **防止页面刷新**：如果只是想更新页面的部分内容而不是整个页面，可以使用`fetch`或`XMLHttpRequest`发送异步请求，获取数据后动态更新DOM。 5. **安全与兼容性**：需要注意的是，由于同源策略的限制，跨域跳转...
BrowserSync的出现解决了这个问题，它监听文件变化并自动刷新页面，同时支持CSS热加载，这意味着当开发者修改CSS文件后，页面样式会立即更新，无需等待整个页面重新加载。 描述中提到“支持所有主流浏览器”，...
在某些情况下，例如用户在网页上进行某些操作时，我们可能希望在不刷新页面的前提下，改变浏览器地址栏的URL以反映当前页面状态，这时，就可以结合使用Ajax和Html5的history API。 使用这些新特性的好处在于可以...
### JS刷新页面知识点详解 #### 一、概述 在Web开发中，页面的刷新是非常常见的需求之一。通过JavaScript（简称JS）实现页面刷新不仅可以提升用户体验，还能满足特定场景下的功能需求。本文将详细介绍几种常见的...