时间戳

首页 > 解决方案 > 如何将链接指向加载到另一个页面上的 iframe 中的页面，并通过单击将其滚动到位置？

javascript - 如何将链接指向加载到另一个页面上的 iframe 中的页面，并通过单击将其滚动到位置？

问题描述

-- 库.htm --

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

-- 内容.htm --

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

-- 地图.htm --

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

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

标签： javascripthtmlcss

解决方案

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

地图.htm

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

图书馆.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>

内容.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'）。

地图.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>

图书馆.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>

内容2.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>

内容1.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>

推荐阅读