gpt4 book ai didi

javascript - 在 AJAX 中处理 "refresh"或 "back"以保留 "parent"html

转载 作者:行者123 更新时间:2023-11-28 15:28:47 27 4
gpt4 key购买 nike

所以我对 AJAX 相当陌生,我有一个简单的 3 页元素,我正在使用 AJAX 在页面之间转换。

我有一个 index.html 页面,它加载了所有的 html/body/脚本等:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax practice</title>

<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>

<div class="" id="wrapper">
<div class="overlay"></div>
<header>
<nav>
<ul>
<li><a class="aboutBtn" href="main.html">Home</a></li>
<li><a class="aboutBtn" href="about.html">About</a></li>
<li><a class="aboutBtn" href="#">Menu</a></li>
<li><a class="aboutBtn" href="#">Contact</a></li>
</ul>
</nav>
</header>

<div class="page wrapper" id="page">
<div class="circle" id="black"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"></div>

<section class="mainSplash main">


<div class="mainSplash__content" id="content">

</div>


</section>
</div> <!-- page -->
</div> <!-- wrapper -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/index.js"></script>

</body>
</html>

我的 2 个页面是:

main.html:

<h1 class="mainSplash__header--h1">Main</h1>

关于.html:

<h1 class="mainSplash__header--h1">About</h1>

这是转换页面的 AJAX:

    $(document).ready(function() {


var pathname = window.location.pathname; // Returns path only

console.log(pathname);

// $('.mainSplash').css('height',$(window).height() - 60);

$(".aboutBtn").click(function(e) {
e.preventDefault();
var pageTitle = $(this).text();
var pageUrl = $(this).attr('href');

changePage(pageUrl, true, pageTitle);
}); // click

function changePage(url, bool, pageTitle){
$('#page').addClass('fadeOut');

loadContent(url, bool, pageTitle);
}

function loadContent(url, bool, pageTitle){
$.ajax({
url: './' + url,
type: 'get',
contentType: 'html',
success: function(data){
$('#page').one('animationend',
function(e) {
// load content
$('#page').removeClass('fadeOut');
$('#page').addClass('fadeIn');
$('#content').html(data);
//$("html").html(data);
// Change url
if(url != window.location){
window.history.pushState({path: url}, pageTitle, url);
}
});
}
});
}

function removeAnimation(){
$('#page').removeClass('animate');
}

});

因此,当我来自 index.html 时,我的转换工作正常,尽管当我刷新 main.html 或 about.html 时,它们不会保留 index.html 中的代码(很明显)。

My question is:

如何在不丢失 index.html 内容的情况下处理页面的刷新或后退按钮?感谢您提供任何帮助或建议 - 提前致谢。

PS:如果有人知道任何 AJAX html 页面转换示例,我很想知道,这样我就可以改进我的代码,因为我正在寻找 AJAX 转换的最佳实践!

最佳答案

有多种方法可以做到这一点,但最好的方法是使用哈希路由。看到这个插件'Routei '.然后在哈希路由中设置参数,然后在单击后退按钮和使用此参数的 handel ajax 时获取它。

关于javascript - 在 AJAX 中处理 "refresh"或 "back"以保留 "parent"html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44925137/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com