时间戳

首页 > 解决方案 > 是否可以更改 html 页面并仅显示选定的 iframe？

javascript - 是否可以更改 html 页面并仅显示选定的 iframe？

问题描述

在我的网站中有两个主要的 html 页面。一个是主页 ( index.html)，另一个 ( main.html) 是我放置几个 iframe 元素的页面，其中显示了我创建的其他一些 html 页面。第一件事：是否可以从 index.html 转到 main.html（带有锚元素和 href 属性）并且还只显示 main.html 中的一些 iframe？基本上，我想单击 index.html 中的一个按钮并同时重定向到 main.html 但只显示前两个 iframe，而通过单击 index.html 上的第二个按钮我转到 main.html 但只有这次显示了最后两个 iframe。

第二件事：在 main.htmlfun()中调用了一个函数，<body onload="fun()">该函数从 iframe 元素的所有 html 页面源中检索某种信息，即使当前并未显示所有 iframe。不过这需要很多时间，所以我认为最好将fun()iframe 的 id 作为参数来获取信息，具体取决于用户在 index.html 上单击的按钮。如上面的示例，我想知道是否有可能通过单击 index.html 中的按钮 1，我被重定向到 main.html（因为 main.html 是 href 属性的值）但是在同时，由于我单击了按钮 1，因此只显示了 main.html 中的前两个 iframe，并且fun()仅从这两个 iframe（onload）中检索信息。有可能还是我只是一个梦想家？

标签： javascripthtmliframehrefonload

解决方案

锚点

锚点用于跳转到具有唯一 ID 的特定元素。因此，链接必须是：

<a href="#ID-Name"> Link Name </a>

如果我们现在考虑您的 index.html 有一个带有 ID 的元素，Test-Element那么外部页面的链接将是：

<a href="index.html#Test-Element"> Test-Element </a>

：目标

target 是 CSS 与锚点一起使用的伪选择器。您可以简单地使用隐藏所有元素display: none;并使用:target仅显示使用其锚链接调用的元素。

#Test-Box-green,
#Test-Box-blue,
#Test-Box-red {
  height: 50px;
  width: 50px;
  margin: 5px;
  display: none;
}

#Test-Box-green {
  background-color: green;
}

#Test-Box-red {
  background-color: red;
}

#Test-Box-blue {
  background-color: blue;
}

#Test-Box-green:target {
  display: block;
}

#Test-Box-red:target {
  display: block;
}

#Test-Box-blue:target {
  display: block;
}

a div {
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
  width: 30%;
  text-decoration: none;
  color: black;
}
<a href="#Test-Box-green"><div>Show green test box</div></a>
<a href="#Test-Box-blue"><div>Show blue test box</div></a>
<a href="#Test-Box-red"><div>Show red test box</div></a>

<div id="Test-Box-green"></div>
<div id="Test-Box-blue"></div>
<div id="Test-Box-red"></div>

推荐阅读