URL рамки дисплея

Question

Я занимаюсь разработкой проекта, который настроен следующим образом:

Содержит рамку с двумя столбцами:
-> Первый столбец (Col1) имеет главное меню (например, CEO, HR, Staff, Clerk, ...)
-> Следующий столбец (Col2) имеет соответствующее содержимое.

Теперь, когда я нажимаю "CEO", соответствующая страница загружается в Col2, как и должно быть, но URL-адрес страницы остается прежним.

Можно ли изменить URL-адрес?
То есть, скажем, (C:\\web\Masterpage.html) на (C:\\web\CEO.html)

Пожалуйста, помогите мне найти решение .. Заранее спасибо ..

Answer 1

Я не думаю, что вы можете изменить URL загруженной страницы только потому, что изменяется 'iframe'.

Но вы можете добавить внутренние переходные ссылки или постоянные ссылки, которые изменят основной URL
с C:\\web\Masterpage.html на C:\\web\Masterpage.html#CEO или C:\\web\Masterpage.html#HR

Вы можете добавить переходные ссылки, добавив <div id="CEO" class="heading">CEO</div> перед тегами <iframe>, а затем изменив местоположение href вашего меню на href="#CEO", href="#HR" и т. Д. *

Запустите приведенный ниже фрагмент кода, и при наведении курсора на ссылки вы увидите, что привязка заканчивается на #CEO, #HR и т. Д. Адрес, отображаемый в адресной строке браузера, будет таким же.

var winLoc = window.location.href;

function writeFrame(y, p) {
  var Loc = winLoc + "#" + p;
  var y = document.getElementById(y).contentWindow.document;
  y.open();
  y.write("Content for " + p + " Goes here<br><br>The full URL of this page is:<br>" + Loc);
  y.close();
}

writeFrame("CEOframe", "CEO");
writeFrame("HRframe", "HR");
writeFrame("Staffframe", "Staff");
writeFrame("Clerkframe", "Clerk");

body {
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  justify-content: center;
  font-family: monospace;
}

ul {
  padding: 0 10%;
}

li {
  font-size: 1.5em;
  padding: 0.3em 0;
  list-style-type: none;
}

.mainContent {
  height: 100vh;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  background: royalblue;
}

.heading {
  font-size: 2em;
  padding-left: 0.5em;
  color: white;
}

iframe {
  width: 98%;
  height: calc(100vh - 3em);
  margin: 0;
  padding: 0;
  background: white;
}

<div class="mainMenu">
  <ul>
    <li><a href="#CEO">CEO</a></li>
    <li><a href="#HR">HR</a></li>
    <li><a href="#Staff">Staff</a></li>
    <li><a href="#Clerk">Clerk</a></li>
  </ul>
</div>
<div class="mainContent">
  <div id="CEO" class="heading">CEO</div>
  <iframe id="CEOframe"></iframe>
  <div id="HR" class="heading">HR</div>
  <iframe id="HRframe"></iframe>
  <div id="Staff" class="heading">Staff</div>
  <iframe id="Staffframe"></iframe>
  <div id="Clerk" class="heading">Clerk</div>
  <iframe id="Clerkframe"></iframe>
</div>

Надеюсь, это поможет.

Мир ?

Answer 2

Вы можете достичь этого с помощью JavaScript. Если вы хотите использовать javascript для этого и не нашли решения, я могу дать подсказку:)

Answer 3

Отображаемый URL-адрес является URL-адресом или страницей, и с этим ничего нельзя поделать. Единственный способ изменить URL-адрес - показать другую страницу.

Мой совет - сделать страницы без набора фреймов. Набор фреймов обычно доставляет больше хлопот, чем стоит.