хранить 2 сайта в одном файле и динамически переключаться между ними

-2

так что это очень неопределенный вопрос, но я сказал, что у меня есть один файл.html, и я хотел хранить по существу 2 веб-сайта в одном файле и подкачку на вторую страницу, когда условие стало истинным на первой странице (желательно событие javascript onclick) вроде как оператор if (если условие A становится истинным на первой странице: show page 2 else: continue to show page 1) будет ли это возможно только в javascript или мне понадобится помощь других языков программирования и что будет наиболее оптимальный способ обойти это? Я хотел бы, чтобы данные, введенные во входной feild на стр. 1, также доступны на стр. 2.

извините за неопределенный вопрос и ужасное форматирование, это мой первый вопрос.

  • 2
    это очень расплывчато По инстинкту я бы сказал вам изучать PHP с некоторой базой данных.
  • 1
    Если вам нужно менять страницы по клику, вам нужен только HTML, просто используйте две страницы с элементом <a> в каждой из них. Href будет указывать на другой файл HTML. Готово.
Теги:

1 ответ

1

Джоэл, у меня недостаточно репутации, чтобы комментировать, поэтому я должен набрать ответ.

Локальное хранилище позволяет сохранить значение (номер страницы для отображения) в локальной локальной памяти пользователя. Это значение может быть проверено на существование (полезно для истинных/ложных условий) и может быть прочитано (для значимых значений).

Все, что вам нужно сделать, это связать создание простого локального объекта хранения (отображаемый номер страницы). Привяжите код, чтобы создать объект хранения в зависимости от того, какое вы хотите (например, щелчок кнопки).

localStorage.setItem('entryPage', '2');

Вам также понадобится некоторый код для чтения в файле HTML, чтобы решить, что отображать (через прокрутки, скрытые и отображаемые элементы DIV или любой другой метод, который вы используете).

if(localStorage.getItem('entryPage')) {
  //show page two code
}

Проверьте здесь полный набор обучающих программ:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Ниже представлено хромированное одностраничное решение, просто демонстрирующее концепцию локальной части хранилища. Вы всегда будете в одном и том же файле HTML, но загрузка покажет контент до тех пор, пока вы не нажмете кнопку и не установите локальное хранилище для отображения страницы 2, тогда любая будущая загрузка будет второй, пока вы не очистите локальное хранилище.

<!DOCTYPE html>
<html>

<body>
<div id="main-container">
    <div id="content-one" style="display:block;">
    <p>This is page one content</p>
    <button id="showTwo">Show Page 2</button>
    </div>
    <div id="content-two" style="display:none">
    <p>this is content for page 2</div>
    </div>
</div>
<script>
//this function actually swaps display
function swapper(){
  document.getElementById('content-one').style.display = 'none';
  document.getElementById('content-two').style.display = 'block';
}
//if the value exists in storage, swap them
if(localStorage.getItem('entryPage')) {
  swapper();
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){swapper();localStorage.setItem('entryPage', '2');}, false);

</script>
</body>
</html>

Чтобы очистить локальное хранилище в Chrome, см. Раздел LOCAL AND SESSION здесь: https://developer.chrome.com/devtools/docs/resource-panel#local-and-session-storage

Ниже приведена версия, включая текстовое поле, которое просто использовало значение локального объекта хранения для хранения данных, которые вы хотите перенести на страницу содержания 2. (Помните, что если вы протестировали первый пример выше, вы должны очистить локальное хранилище до используйте этот пример ниже, потому что иначе он никогда не покажет вам первую область содержимого).

<!DOCTYPE html>
<html>

<body>
<div id="main-container">
    <div id="content-one" style="display:block;">
    <p>This is page one content</p>
    <input type="text" id="theInput"></input>
    <button id="showTwo">Show Page 2</button>
    </div>
    <div id="content-two" style="display:none">
    <p>this is content for page 2</div>
    <p id="theOutput"></p>
    </div>
</div>
<script>
//this function actually swaps display and shows the value from page 1 textbox
function swapper(theValue){
  document.getElementById('content-one').style.display = 'none';
  document.getElementById('content-two').style.display = 'block';
  document.getElementById('theOutput').innerText = theValue;  
}
//if the value exists in storage, swap them and pass on the value of textbox
if(localStorage.getItem('entryPage')) {
  swapper(localStorage.getItem('entryPage'));
}

//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");   
btn.addEventListener("click", function(){
    var theData = document.getElementById("theInput").value;    
    swapper();
    localStorage.setItem('entryPage', theData);
}, false);

</script>
</body>
</html>
Поделиться
  • 0
    PS - Обратите внимание, я понял, что вопрос означает, что вы должны содержать HTML для обеих страниц в одном файле HTML. В противном случае, просто используйте ссылку, и я не могу поверить, что я ответил ... дох !! Я только пытался помочь!
  • 0
    спасибо за подробный ответ, я все еще изо всех сил пытаюсь понять концепцию, которую вы пытаетесь мне показать, поэтому я пока не понимаю, сработает ли ваше решение для меня, но я обязательно проведу еще несколько исследований и посмотрю учебник вы связаны
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню