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

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

javascript html css

Javascript 如何将链接指向加载到另一个页面的iframe中的页面，并通过单击将其滚动到某个位置？,javascript,html,css,Javascript,Html,Css,--library.htm-- <iframe id="libcont" name="libcontent"> <a href="content.htm#scroll" target="library.htm#libcontent">Read More...</a> --content.htm-- <iframe id="libcont" name="libcontent"> <a href="content.htm#scroll"

--library.htm--

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

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

--content.htm--

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

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

lorem ipsum

lorem ipsum

--map.htm--

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

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

目标：点击“map.htm”中的链接可进入“library.htm” “content.htm”已加载到“libcont”iframe并滚动

添加到标记为“滚动”的段落。我找不到解决此问题的HTML/CSS解决方案。

首先，在content.htm中，使用id而不是名称作为锚定：

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

lorem ipsum

在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>


document.getElementById（'libcont'）.src='content.htm'+window.location.hash；

因此，iframe将加载为content.htm#滚动并滚动到锚点。

您可以使用javascript实现这一点：锚点指向

library.htm

，library的onload函数加载iframe并使用

scrollIntoView（）

（）滚动到正确的位置

map.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


地图

library.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


loadContent=函数（）{
var frame=document.getElementsByName（'libcontent'）[0]；
frame.onload=函数（）{
frames['libcontent'].document.getElementsByName（'scroll'）[0].scrollIntoView（）；
}
frame.src='content.htm'；
};
图书馆

content.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


内容
lorem ipsumlorem ipsum

更新：加载不同的内容

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

map.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


地图

library.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


loadContent=函数（）{
const urlParams=新的URLSearchParams（window.location.search）；
const content=urlparms.get（'content'）；
//检查查询参数“content”是否存在
如果（内容）{
var frame=document.getElementsByName（'libcontent'）[0]；
frame.onload=函数（）{
frames['libcontent'].document.getElementsByName（'scroll'）[0].scrollIntoView（）；
}
//加载内容
frame.src=content+'.htm#scroll'；
}
};  
图书馆

content2.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


内容2
lorem ipsumlorem ipsum

content1.htm

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

<!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>

<!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>

<!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>

 <!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>

<!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>

<!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>


内容1
lorem ipsumlorem ipsum

谢谢。我可以再问你两个问题吗？1）如果特定链接打开了页面（与菜单栏相反），是否可以修改为仅预加载内容？2）它是否可以以“map.htm”的不同链接加载不同内容的方式编写？（content1.htm、content2.htm等）。不客气。对于这两个问题，我建议使用查询参数。例如：。在脚本上检查“内容”是否存在。如果存在，则加载带有作为参数传递的页面名称的iframe。我将用一个例子更新我的答案。