Здравствуйте. Благодарю за интересный пример решения задачи, с которой я, как начинающий веб-разработчик, уже долго мучаюсь (Я нашел другое решение, но оно менее элегантно). В примере показано, как создать массив из простеньких коротеньких строчек для вставки в окно контента. Понятно, что если там воткнуть огромные html-коды страниц, то JS-код за ними просматриваться не будет. Скажите, а есть какая-то возможность подтягивать тексты отображаемых по нажатию кнопок контентов из внешних файлов, а не задавать их в виде массива строк? Вообще, было бы удобно задавать массив имен файлов, из которых подтягивать html-вставки в окно контента. И еще одни вопрос. А в приведенном примере решения, можно ли сохранить в Избранное ссылку "sorax:8000/about"? И будет ли при входе на сайт по этой ссылке открываться сразу страничка About?
КОнспект console.log(screen.width,screen.height);//разрешение экрана console.log(screen.availwidth,screenavailheight);//размер максимальной доступной //области минус тулбар console.log(screen.colorDepth);//узнать доступную глубину цвета console.log(navigator); //Содержит информацию о браузере, количестве доступных потоков, //версии ОС, полезен для сбора статистики. console.log(history.length);//длина доступной нам истории history.back(); history.forward();//вперед назад по истории вкладки history.go(-2|2);//вперед назад по истории вкладки но не на шаг а на н-шагов /********СПОСОБ СОХРАНЕНИЯ СОСТОЯНИЯ ЧЕРЕЗ ХЭШИ***********/ // var links, updatestate, contentEl; // contentEl = document.querySelector('.content'); // links = { // main: "This is the Main page", // about: "This is the About page", // something: "This is the Something page", // }; // updatestate = function(){ // var content = links[location.hash.slice(1)];//обращаемся с объектом как с массивом // contentEl.innerHTML = content || "Page not found"; // }; // window.addEventListener('hashchange',updatestate); // window.addEventListener('load', updatestate); var links, updatestate, contentEl, navEl; contentEl = document.querySelector('.content'); navEl = document.querySelector('.nav'); links = { main: "This is the Main page", about: "This is the About page", something: "This is the Something page" }; updatestate = function(state){ if (!state) return; contentEl.innerHTML = links[state.page]; }; window.addEventListener('popstate', function(e){ updatestate(e.state); }) //window.addEventListener('load', function(e){updatestate(e.state);}); navEl.addEventListener('click', function(e){ var state; if (e.target.tagName !== 'A') return; state = {page: e.target.getAttribute('href'), }; history.pushState (state, '', state.page); updatestate(state); e.preventDefault(); });//Не работает а мне спать охота, буду признателен если кто поправит где я не прав
e.preventDefault() лучше в самый верх ставить после объявления переменных. Так хоть в консоли вывелось, что переменную неправильно записал navEL, а надо navEl.
метод history.pushState не работает если адрес страницы отличается от index-ной. в боевых условиях придется допиливать, но возможно ли это.. просто не получится, как ни крутил не получилось. хотя может чтото упустил. вариант с hashchange работает лучше пусть и не красиво с #. но думаю это не так критично. вот нашел пример если кому пригодится benalman.com/code/projects/jquery-hashchange/examples/document_domain/
посоветуй пожалуйста как настоящий профессионал, как относиться к джейквери ? лучше ванильку юзать или можно и его ? или может лучше написать свой мини джеквери для только тех функций которые я использую ?
Anton Stasyuk . jQuery в разы проигрывает Ванилле. Заходите ко мне на github.com/Selyutin-Egor/scripty/tree/master/ver%200.4.0 В своих уроках я детально подвожу к написанию этой библиотеки.
Когда доходишь до конца, перестает работать перезагрузка с любым из хэшей - "404". По сути, событие "load" становится бесполезным. Код не продуман до конца. Кто знает, как решить проблему?
Важный нюанс! Если просто браузером открыть файл index.html ,написанный в конце ролика, то при нажатии на любую кнопку выдает ошибку ERR_FILE_NOT_FOUND. Чтобы этого не происходило, нужно запустить live server. Для VS Code напимер ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ROv_XigBgwc.html
Grigore Rusnac если сайт на сервере, то можно через error 404 =)) нет серьезно, в корне в .htaccess пишешь ErrorDocument 404 /index.php . index.php это страница на которую перенаправляет, считываешь путь текущий и в зависимости от него загружаешь нужный контент.
@@alexalexandrov7938 уже не помню но предполагаю что речь шла о том что бы не использовать чистый JS для SPA (Single Page Application), а какой-то Фреймворк или библиотеку. Сейчас топовым выбором будет ReactJS, Angular, Vue etc.
У меня ничего этого не работает. Вот код Javascript-джедай #34 - History, Screen, Navigator Welcome to my page MainAboutDownloads var links, updatestate, contentEl; contentEl = document.querySelector('.content'); links = { main: "This is the main page", about:"This is the about page", downloads:"This is the downloads page" } updatestate = function(){ var content = links[location.hash.slice(1)]; contentEl.innerHTML = content || "Page not found"; }; window.addEventListener('hashchange', updatestate); Как было до написания скрипта так и осталось скрипты ничего не делают у меня. Вот скриншот: joxi.ru/hj81UxjKTJAUMEh0p8U .
