个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我试图遵循此处使用的示例:http://html5.gingerhost.com/我决定使用 jQuery 的 .load() 代替 JSON，
这是我的代码:
$(function() {
$('a').click(function(e) {
$('img#logo').stop().hide().fadeIn( "slow" );
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$('#load').load( url + " #load2").stop().hide().fadeIn( 'slow' );
}
示例的loadContent函数:
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
HTML:
<head>
<meta charset="utf-8">
<title>Andy Simon</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main">
<div id="top">
<div id="logo">
<div>
<a id="logo" href="index.html"><img id="logo" src="logo1.png" /></a><span id="logo_text">simon</span>
</div>
</div>
<div id="nav">
<a class="nav_link" id="work" href="work.html"> work . </a>
<a class="nav_link" id="work" href="work.html"> about . </a>
<a class="nav_link" id="work" href="contact.html"> contact </a>
</div>
</div>
<div id ="middle">
<div id="load">
<div id="load2">
home home andy pandy home home home
</div>
</div>
</div>
<div id="foot">
</div>
</div>
</body>
当我点击链接时，页面会重新加载，这是我试图阻止的。我以为我的 e.preventDefault() 会阻止这种情况。任何帮助表示赞赏!
最佳答案
您可以输入“return false;”在你的js代码中阻止它上传:
$('a').click(function(e) {
e.preventDefault();
$('img#logo').stop().hide().fadeIn( "slow" );
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
return false;
});
关于javascript - PushState 重新加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17375373/
25
4
0
我有下面这个简单的 html 代码。它在我的 Chrome 和 IE11 开发环境 (Visual Studio 2010) 中按预期工作(将 ?SomeParam 附加到 url)。当我将其放入网络
我在下面有这个简单的 html 代码。它在我的 Chrome 和 IE11 开发环境 (Visual Studio 2010) 中按预期工作(将 ?SomeParam 附加到 url)。当我把它放在网
我在 JavascriptMVC 应用程序中使用 window.history 来为每个 Controller 启用后退/前进/刷新功能。每次加载新 Controller 时，我都会使用 window
假设我们有一个 这对页面的状态进行了重要的更改。 Primefaces 5.1 生成以下 HTML: Click me for state 1 Click me for state 2 在 popst
我正在使用 HTML 历史记录 API 来操作浏览器历史记录堆栈，以在我的网站上使用 JavaScript 控制导航。我设置的更改页面的功能工作正常，但奇怪的是，当我将 pushState 添加到每个
我有一个带过滤器的电子商店。当有人使用过滤器时，url 会通过 AJAX 进行更改。 我所做的是使用 .ajaxComplete 函数来检查 ajax 完成情况。在这个函数中，我有一个名为 Repla
我创建了一个 Web 应用程序，它利用 history pushState 和 replaceState 方法来浏览页面，同时更新历史记录。 脚本本身几乎可以完美运行；它将正确加载页面，并在需要抛出页
我正在研究技术:History API PushState (HTML5) 我需要用于使用 URL 重定向的命令，因为我有服务器的 CherryPy。 我无法将数据从 Cherrypy(使用 Mako
在测试场景中，我有两个页面 pageA 和 pageB。 在第一步中，一个按钮触发window.history.pushState 调用，并在地址栏中显示pageB 的地址。 第二步浏览器地址栏用于请
我有这个 URL 替换查询: window.history.pushState(null, null, window.location.search.replace(/\bcolor=[^&]*/,
我通过 stackoverflow 找到了 history.pushState() 的示例，但我不明白每件事的作用。这就是我的 var stateObj = { foo: "bar" }; h
这是代码: $.ajax({ type: "POST", url: url, xhr: function(
我试图遵循此处使用的示例:http://html5.gingerhost.com/我决定使用 jQuery 的 .load() 代替 JSON， 这是我的代码: $(function() {
我正在使用history.pushState来操作浏览器历史记录，有没有办法撤消/弹出特定的推送状态。 假设我从 google.com 转到 myPage.com。在 ajax 调用之后，我执行 Pu
所以我有这个菜单: Meet The Team What We Do See Us In Action
有谁知道确定是否可以使用 pushState 的库？ 我在用这个: if(window.history.pushState){ window.history.pushState(null, d
如 GitHub's blog 所示, 他们实现了 HTML5's JavaScript pushState树浏览功能(适用于现代浏览器)，带来 AJAX 导航 without Hash Bangs
我已经读过十几遍了，状态对象可以存在于多个键|值对中，并且它与新的历史条目相关联。但是有人可以给我一个状态对象的好处的例子吗？它的实际用途是什么？我无法想象为什么不直接输入 {} 最佳答案 以这个小例
我有一个简单的 React Router 配置。我有另一个基本上用 ... 包装的，它有效。但是这个没有(当然，我尝试使用不同的实现，就像 this post 和许多其他人的答案中所建议的那样。 控制
我使用 history.pushState( stateObject, title, url ) 将新条目推送到浏览器的历史堆栈。尽管有名称，第二个参数 title 并未设置浏览器历史记录中显示的条目
我是一名优秀的程序员,十分优秀！