CODEWITHSUNDEEP
html
Sakthivel
Sakthivel

Reputation: 1941

Display frame url

I am developing a project, which is set up as follows,

It contains a frame with two columns:
--> First column (Col1) has the main menu (For example CEO, HR, Staff, Clerk,...)
--> Next column (Col2) has the corresponding content.

Now, when I click on the "CEO", the corresponding page is loaded in the Col2 just like it should, but the URL of the page remains same.

Is it possible to change the URL?
That is from say (C:\\web\Masterpage.html) to (C:\\web\CEO.html)

Please help me to find the solution.. Thanks in advance..

Upvotes: 0

Views: 242

Answers (2)

YourPalNurav
YourPalNurav

Reputation: 1320

I don't think you can change the URL of the loaded page just because an 'iframe' is getting changed.

But you could add in-page jumplinks or permalinks which will change the main URL
from say C:\\web\Masterpage.html to C:\\web\Masterpage.html#CEO or C:\\web\Masterpage.html#HR

You can add jumplinks by adding <div id="CEO" class="heading">CEO</div> before the <iframe> tags and then changing the href location of your menu to href="#CEO", href="#HR" and so on...

Run the code snippet below and when you hover over the links you'll see that the anchor ends in #CEO, #HR etc. The address displayed in browser's address-bar will be the same.

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>

I hope this helps.

Peace 🖖

Upvotes: 1

Guffa
Guffa

Reputation: 700850

The URL that is displayed is the URL or the page, and there is nothing that you can do about that. The only way to change the URL is to dispay a different page.

My advice would be to make the pages without a frameset. A frameset is usually more trouble than it's worth.

Upvotes: 0

Related Questions