JavaScript — использование pushstate для загрузки определенных страниц на моем веб-сайте ajax
Я устанавливаю плагин для обмена социальными сетями на свой веб-сайт и замечаю, что могу поделиться только одной ссылкой …. главной индексной ссылкой. Как мне использовать pushstate для изменения URL-адреса в моем браузере для загрузки каждой конкретной страницы? на моем сайте при публикации. Поскольку я использую мой код AJAX, у меня есть только один URL, и это https://trillumonopoly.com. Я не знаком с pushstate, но я читал, что это то, что я ищу.
например, если я хочу опубликовать в социальных сетях страницу с музыкой на моем веб-сайте, поэтому, когда люди нажимают на ссылку, они переходят на указательную страницу моего веб-сайта с этой конкретной страницей, загруженной в div. Как я это сделаю
вот мой код jquery / ajax
$(document).ready(function () {
loadMainContent('main');
$('body').delegate('.navMenu', 'click', function (event) {
event.preventDefault();
loadMainContent($(this).attr('href'));
});
});
function loadMainContent(page) {
$('#main').load('pages/' + page + '.php');
}
Решение
Если у вас есть как URL yoursite/someroute тогда вы получите not found ошибка. Таким образом, вам нужно указать apache, чтобы он обслуживал index.php для этих маршрутов, используя перезапись.
В документе. Уже нужно проверить URL (document.location.pathname) и загрузить содержимое в соответствии с тем, что путь.
На индексной странице всегда должен отображаться загрузочный счетчик, который будет заменен фактическим содержимым в зависимости от имени пути в URL.
Вот простой пример кода, как вы могли бы сделать это:
//if path is /contact then return object with the url to php content page
// and title of the page
const pathToPage = path => {
switch (path) {
case "/contact":
return {
url:"/contact.php",title:"Contact",path:path
};
}
}
//when user navigates back and forward
window.addEventListener(
"popstate",event =>
//only set content, do not mess with history
onlyLoadmain(
pathToPage(location.pathname)
)
);
//load main content with or without messing with history
const loadMainBuilder = (push)=>(page)=> {
//if page is undefined then path is not of known content
if(page!==undefined){
if(push){
//set the url
history.pushState(
{},
page.title
,page.path
);
}
document.title = page.title
//@todo: should show loading here
//$('#main').html(loading);
$('#main').load(
'pages/' + page.url + '.php'
);
}
}
const loadMainAndPush = loadMainBuilder(true);
const onlyLoadmain = loadMainBuilder(false);
//... other code
$(document).ready(function () {
//load the content of current page
// when user gets a url in their email like yoursite/contact the
// apache rewrite rule will serve index.php but main content is
// showing loading untill your code actually replaces it with something
onlyLoadmain(pathToPage(location.pathname));
$('body').delegate('.navMenu', 'click', function (event) {
event.preventDefault();
//the element clicked should have href with the path, not the php file path
//so /contacts not /pages/contacts.php
loadMainAndPush(pathToPage($(this).attr('href')));
});
});
Другие решения
Других решений пока нет …