[英]How to deal with page refresh when using HTML5 History?
I have read through tons of tutorials and examples to no avail which leads me to ask my question here. 我通读了大量的教程和示例,无济于事,这使我在这里提出自己的问题。 I am developing a webpage with a fixed side navigation with a dynamic content div.
我正在开发一个带有动态内容div的固定侧面导航的网页。
Problem 问题
When i click on a link let's say 'load', the content div will display the content from my other page 'loadcourses.php' then using the history api i will change the url to 'http://mydomain.com/main.php?page=loadcourses'. 当我单击链接时,例如说“加载”,内容div将显示其他页面“ loadcourses.php”中的内容,然后使用历史记录api将URL更改为“ http://mydomain.com/main”。 php?page = loadcourses”。 Basically the main.php will not change i will just add the title of the other page and tag it as a parameter behind the link.
基本上main.php不会改变,我只会添加另一页的标题并将其标记为链接后面的参数。
Next, from the dynamically loaded content, i have some links to show the content of each individual course when clicked. 接下来,从动态加载的内容中,我可以单击一些链接来显示每个课程的内容。 The crucial part lies here, once i clicked on any link, i am supposed to parse another parameter to the next page which is 'course.php'.
关键部分就在这里,一旦我单击了任何链接,就应该将另一个参数解析为“ course.php”。 I have set my href='http://mydomain.com/course.php?cid=CSC101'.
我已经设置了href ='http://mydomain.com/course.php?cid = CSC101'。 Now i have no problem loading the first time with the dynamic div loading the content and successfully retrieving the id CSC101 at the next page.
现在,我第一次加载动态div就没有问题,动态div加载了内容并在下一页成功检索了ID CSC101。 But when i hit refresh, my cid is lost.
但是当我点击刷新时,我的CID丢失了。
The back/forward button works fine as per the history api. 根据历史记录api,后退/前进按钮可以正常工作。 Help needed here, Thanks!!
这里需要帮助,谢谢! I am currently working on this .jsp prototype.
我目前正在研究此.jsp原型。
document.addEventListener('DOMContentLoaded', init, false);
function hasBrowserHistory(){return !!(window.history && history.pushState);}
function updateHistory(url, replaceHistory) {
//Create a page path
var path = "?page=" + url.split(".")[0];
var object = {
data: url
};
if(replaceHistory){
//alert('as');
/*
If this is the first page we are loading
replace the current history item.
*/
history.replaceState(object, null, path);
}else{
//alert('qw');
/*
If we got here by clicking one of the links
add a new item to the browser history
*/
history.pushState(object, null, path);
}
}
function loadPage(whichPage, replaceHistory) {
$('#contentCol').load(whichPage);
updateHistory(whichPage, replaceHistory);
}
function historyPopStateHandler(e) {
//var state = history.state;
if (e.state == null) {
alert(e.state.url);
}
if(e.state != null) {
loadPage(e.state.data, true);
}
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function init() {
//Check if the history API is available
if(!hasBrowserHistory()){
alert('Sorry dude, your browser does not support the history API');
return;
}
//Check if we have any url params (e.g bookmark or reload)
var params = getUrlVars();
if(params['page'] != undefined && params['page'] != null){
//Load the holder page with the correct content
loadPage(params['page'] + ".jsp", true);
}else{
//Load the default page
loadPage('loadcourses.jsp', true);
}
//Setup listeners for the links
jQuery('nav > a').click(function(e){
e.preventDefault();
loadPage(jQuery(e.target).attr('href'), false);
});
//Setup listeners for the history events
window.addEventListener('popstate', historyPopStateHandler);
}
yea guyz i heard the same problem but i fixed it... its so simple , when you hit refresh, the browser will request the page from the server and the page would not be there... to cater for this you need a .htaccess file that will be used in redirecting those requests to the respective php file... like if the url is www.you.com/coding, the .htaccess file will scan for the word coding, the redirect the request to coding.php... inside the php, you need to get the url of the request $_SERVER['REQUEST_URI'] then do some filtering... if the request satisfy the filters... have a html page embeded on that php bla.. ?> 是的,我听到了同样的问题,但我已解决了它。它是如此简单 ,当您单击刷新时,浏览器将向服务器请求该页面,而该页面将不存在...以解决此问题,您需要一个。 htaccess文件,该文件将用于将这些请求重定向到相应的php文件...例如,如果该网址是www.you.com/coding,则.htaccess文件将扫描文字编码,将请求重定向到encoding.php ...在php内部,您需要获取请求$ _SERVER ['REQUEST_URI']的网址,然后进行一些过滤...如果请求满足过滤条件...则在该php bla上嵌入了html页面。 ?>
so in the html put the values that would have appered when you loaded the form... and thats the logic i even tried it in my website deenze and it worked 因此,在html中放置了加载表单时将要贴上的值...这就是我什至在我的网站deenze中尝试过的逻辑,它也有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.