我正在尝试创建一个使用 AJAX
加载所有页面的网站。这是一个简单的JS
这样做是这样的:
$.ajax({
url: url,
type: 'GET',
success: function(html) {
document.open();
document.write(html);
document.close();
}
});
这显然有效并更新了我当前的页面内容。
问题是我想保留一个div
不变(我们称之为 .player-wrapper
)。这个div
实际上是一个<audio>
我想继续玩的包装器(这就是我 AJAX 化整个网站的原因)。这可能吗?
最佳答案
每次渲染页面时,您都可以像这样初始化插件/库:
const App = function() {
return {
init: function() {
// Do all your JS stuff here
console.log('App initialized.');
},
render: function(url) {
$.get(url, data => {
$('main').html(data);
}, 'html').done(() => {
this.init();
});
}
};
}();
$(function() {
App.init();
$(document).on('click', '[data-page="ajax"]', function (e) {
e.preventDefault();
const url = $(this).attr('href');
App.render(url);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<audio class="player-wrapper" src="https://www.free-stock-music.com/music/alexander-nakarada-wintersong.mp3" controls autoplay></audio>
<main>
<h1>Initial page.</h1>
</main>
<nav>
<a href="https://reqres.in/api/unknown/2" data-page="ajax">Go to dummy page</a>
</nav>
关于javascript - 使用 Ajax 更新除一个 div 之外的页面内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59760865/