Question

我制作了一个网页。有两个iframe 在里面。首先是索引，第二个是描述页面。我希望当我点击任何索引超链接时，它会显示在主要描述页面上。怎么可能？请给我HTML代码

Answer 1

您可以使用按钮，点击它时，使用Javascript更改iFrame的网址：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis tortor auctor, mattis nulla vel, varius mauris. Maecenas cursus eleifend consequat. Fusce hendrerit dui quis ante iaculis sagittis. Aliquam vehicula quam sollicitudin vestibulum porttitor. Aliquam id quam auctor, ultrices elit eu, lacinia tortor. Phasellus in scelerisque mauris. Suspendisse rutrum at odio at sodales. Cras porta nisl sed justo volutpat, eu efficitur ante pharetra. Pellentesque congue turpis vitae lorem mattis, et molestie quam condimentum. Pellentesque imperdiet orci vitae tortor rutrum viverra. Suspendisse quis rhoncus orci. In vestibulum ac lacus sodales feugiat. Aliquam tempor vehicula urna in egestas.

Curabitur eget ultricies nisi, id consequat arcu. Nulla vitae finibus sem. Mauris bibendum justo non suscipit porttitor. Nulla vel egestas leo, ac hendrerit lacus. Curabitur consequat massa nec nisi cursus scelerisque. In hac habitasse platea dictumst. Aliquam ornare nibh vel lacus mattis efficitur. Nullam sit amet dui ut sapien auctor consectetur sit amet et urna. Morbi placerat eros sem. Phasellus non velit tempor mi pretium eleifend.

Curabitur auctor dui lorem, eu convallis massa facilisis dignissim. Sed sed mi ut nulla scelerisque cursus nec vel odio. Fusce et bibendum libero. Donec vehicula eleifend diam, eget auctor lorem gravida vel. Cras tincidunt ac ligula ut pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget eros at tellus ultrices feugiat in a massa. In fermentum non turpis in lacinia.

Fusce mauris lorem, fermentum vitae massa ut, convallis tristique purus. Quisque euismod auctor vulputate. Sed sodales a risus ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringilla, sed dictum turpis aliquam. 
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

您可以使用the data-attribute在html中存储想要的链接。

如果您想这样做：无法通过iFrame对iFrame之外的内容作出反应。因此您无法在iFrame1中放置链接并重新加载iFrame2，因为那些是两个不同的网站，彼此没有见面。

现在，idk你究竟要做什么，但我真的希望，你不想让你的整个网站都这样。使用iFrames仅对插入小部件（如Codepen等）非常有用，但绝不能用于显示您自己网站的信息。如果您不想为每个站点复制html，请使用PHP。如果您不想重新加载整个网页（这几乎不是问题），您可以使用AJAX请求加载您网站的部分内容。（像React.js，Angular.js和Vue.js这样的框架为你做这件事）

想要当我点击任何索引超链接时，它会显示在主要描述页面上

1 个答案: