Question

我正在开发一个项目，其设置如下，

它包含一个有两列的框架：
- ＆GT;第一列（Col1）包含主菜单（例如CEO，HR，Staff，Clerk，...）
- ＆GT;下一栏（Col2）具有相应的内容。

现在，当我点击"CEO"时，相应的页面会加载到Col2中，就像它应该的那样，但页面的网址仍然相同。

是否可以更改网址？
即从（C:\\web\Masterpage.html）到（C:\\web\CEO.html）

请帮我找到解决方案..提前致谢..

Answer 1

我认为您不能仅因为更改了“ 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

显示的URL是URL或页面，您无法做任何事情。更改URL的唯一方法是发送不同的页面。

我的建议是使页面没有框架集。框架集通常比它的价值更麻烦。

Answer 3

您可以使用javascript实现。如果您想为此使用javascript却找不到解决方案，我可以给您一个提示：）

显示框架网址

3 个答案: