如何将链接指向另一个页面上加载到iframe中的页面，然后单击一下即可将其滚动到位置？

Question

-library.htm-

<iframe id="libcont" name="libcontent">

-content.htm-

lorem ipsum <p name="scroll">lorem ipsum</p>

-map.htm-

<a href="content.htm#scroll" target="library.htm#libcontent">Read More...</a>

目标：单击“ map.htm”中的链接将导致“ library.htm”，其中“ content.htm”已加载到“ libcont” iframe中并滚动到标记为“ scroll”的段落。 我找不到解决此问题的HTML / CSS解决方案。

Answer 1

您可以使用javascript来实现：锚点指向library.htm ， library.htm的onload函数加载iframe并使用scrollIntoView() （ doc ）滚动到正确的位置。

map.htm

<!DOCTYPE html>
<html>
<body>
    <h2>Map</h2>
    <a href="library.htm">Read More...</a>
</body>
</html>

library.htm

<!DOCTYPE html>
<html>
<head>
<script>
   loadContent = function() {
       var frame = document.getElementsByName('libcontent')[0];
       frame.onload = function() {
           frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
       }
       frame.src='content.htm';

   };
  </script>
 </head>
 <body onload="loadContent()">
     <div style="height:1000px; background:gray;"> </div>
     <h2>Library</h2>
     <iframe id="libcontent" name="libcontent"></iframe>
     <div style="height:1000px; background:gray;"> </div>
 </body>
 </html>

content.htm

<!DOCTYPE html>
<html>
<body>
    <div style="height:1000px; background:black;"> </div>
    <h2> Content </h2>
    lorem ipsum <p name="scroll">lorem ipsum</p>
 <div style="height:1000px; background:black;"> </div>
</body>
</html>

更新：加载不同的内容

为了实现这一点，我们将使用查询参数（'content'）。

map.htm

<!DOCTYPE html>
<html>
<body>
    <h2>Map</h2>
    <a href="library.htm?content=content1">Content 1</a>
    <a href="library.htm?content=content2">Content 2</a>
</body>
</html>

library.htm

 <!DOCTYPE html>
 <html>
 <head>
 <script>
     loadContent = function() {

     const urlParams = new URLSearchParams(window.location.search);
     const content = urlParams.get('content');

     // Check if the query param 'content' exists
     if (content) {
        var frame = document.getElementsByName('libcontent')[0];

        frame.onload = function() {
        frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();

        }
        // Loads the content
        frame.src= content + '.htm#scroll';

      }
  };  
 </script>
 </head>
 <body onload="loadContent()">
     <div style="height:1000px; background:gray;"> </div>
     <h2>Library</h2>
     <iframe id="libcontent" name="libcontent"></iframe>
     <div style="height:1000px; background:gray;"> </div>
 </body>
 </html>

content2.htm

<!DOCTYPE html>
<html>
<body>
    <div style="height:1000px; background:black;"> </div>
    <h2> Content 2 </h2>
    lorem ipsum <p name="scroll">lorem ipsum</p>
 <div style="height:1000px; background:black;"> </div>
</body>
</html>

content1.htm

<!DOCTYPE html>
<html>
<body>
    <div style="height:1000px; background:black;"> </div>
    <h2> Content 1 </h2>
    lorem ipsum <p name="scroll">lorem ipsum</p>
 <div style="height:1000px; background:black;"> </div>
</body>
</html>

Answer 2

首先，在content.htm中，使用id代替名称作为锚点：

<p id="scroll">lorem ipsum</p>

在map.htm中使用：

<a href='library.htm#scroll'>read more</a>

在library.htm中，使用javascript将哈希传输到iframe URL：

<script>
    document.getElementById('libcont').src = 'content.htm'+window.location.hash;
</script>

结果，iframe将作为content.htm＃scroll加载并滚动到锚点。

如何将链接指向另一个页面上加载到iframe中的页面，然后单击一下即可将其滚动到位置？

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-04-09 19:36:47

解决方案2
0 2019-04-09 19:24:42

如何将链接指向另一个页面上加载到iframe中的页面，然后单击一下即可将其滚动到位置？

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-04-09 19:36:47

解决方案2 0 2019-04-09 19:24:42

解决方案1
1 已采纳 2019-04-09 19:36:47

解决方案2
0 2019-04-09 19:24:42