javascript - 强制内部 iframe 内容在页面加载时滚动到顶部-6ren

javascript - 强制内部 iframe 内容在页面加载时滚动到顶部

转载作者：行者123 更新时间：2023-11-30 15:12:33

26

4

我网站的所有“内容页面”都在我的索引页面上的 iframe 内打开。

我正在使用 onload="scroll(0,0);"该 iframe 中的代码成功强制我所有的“内容页面”从“顶部”开始。

  <iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe>

到目前为止，还不错。

但是...在我的网站中，我还有一个“子站点”(也在 iframe_A 内部打开)，但它有自己的 iframe [iframe_B]。

子网站的所有内容页面都在 iframe_B 中打开。

一切都很好......但是，不幸的是......我无法让子网站的 iframe_B 的内容页面以与在 iframe_A 中相同的方式在顶部打开。

为了更好地说明我遇到的问题，我提供了一个极其精简的网站模型(6 页，包括“索引页”)，以表示我正在使用的布局。

索引页:

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_A{width:100%; height:1700px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>

<div class="header"><a>Index Header&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

<iframe id="iframe_A" name="iframe_A" src="Page1.html" scrolling="no" onload="scroll(0,0);"></iframe>

<div class="footer"><a>Index Footer&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

</body>
</html>

第 1 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 1 in iframe_A (Top).</div>
<div class="bottom font">This is Page 1 in iframe_A (Bottom).</div>
</body>
</html>

第 2 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 2 in iframe_A (Top).</div>
<div class="bottom font">This is Page 2 in iframe_A (Bottom).</div>
</body>
</html>

第 3 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px;}
.header{width:100%; height:60px; background-color:red;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_B{width:100%; height:1580px; }
.footer{width:100%; height:60px; background-color:red;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>Page 3 (Subsite) Header</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no">
</iframe>
<div class="footer"><a>Page 3 (Subsite) Footer&nbsp;&nbsp;</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
</body>
</html>

第 4 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 4, in iframe_B (Top).</div>
<div class="bottom font">This is Page 4, in iframe_B (Bottom).</div>
</body>
</html>

第 5 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 5, in iframe_B (Top).</div>
<div class="bottom font">This is Page 5, in iframe_B (Bottom).</div>
</body>
</html>

在此模型中...页面 1、2 和 3 始终在 iframe_A 中的页面顶部打开，无论您在上一页中的页面位置如何...它们应该如此。

我试图让内容页面 4 和 5(在第 3 页的“iframe_B”中打开)每次都在顶部打开。

最佳答案

尝试在您的 iframe_B html 标记中使用以下 onload 脚本之一:

<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no" onload="window.top.scrollTo(0,0);">

在下文中，大多数前 2 个应该适用于您的情况。

onload="window.top.scrollTo(0,0);" //Refers to the top main window (page)
onload="window.parent.scrollTo(0,0);" //Refers to the immediate parent window (page)
onload="window.parent.parent.scrollTo(0,0);" //Refers to the parent of parent window (page)

我刚刚尝试过，前两个 onload 事件都非常有效。

关于javascript - 强制内部 iframe 内容在页面加载时滚动到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44895576/

26

4

0

文章推荐：任意长度和精度的 C 计算器(实数)

文章推荐： c# - 如何使用 C# 合并/加入 MP3 文件？

文章推荐： c - 使用gdb计算返回地址

文章推荐： javascript - 尝试让 jQuery 在单击时更改不同的 img src

html - img 在 foreignObject 内部在 svg 内部在 img 内部
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg，内部
html - img 在 foreignObject 内部在 svg 内部在 img 内部
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg，内部
sql - EXISTS 内部 CASE 内部 AGGREGATE FUNCTION
我正在尝试做类似的事情: SELECT SUM( CASE WHEN ( AND EXISTS(SELECT 1
javascript - 内部 ng-repeat 内部 ng-repeat
我想问如何在外部 ng-repeat 内部正确使用内部 ng-repeat: 这意味着你想使用这样的东西: {{milestone.id}} {{
php - 来自(内部 - 内部)wordpress 仪表板的自定义 css 样式
我希望在 wordpress 的仪表板内编辑 css 样式并且如果可能的话不必编辑 php 文件。我知道至少可以编辑一些属性，所以我希望我可以直接在仪表板中编辑所有属性。更具体地说如何更改自定义类
hadoop - Hadoop copyFromLocal 是否创建 2 个副本？ - 1 个在 hdfs 内部，其他在 datanode 内部？
我在安装在 windows10 上的 vmware 中的 Ubuntu 上安装了伪分布式独立 hadoop 版本。我从网上下载了一个文件，复制到ubuntu本地目录/lab/data 我在 ubun
sql - IF 内部 WHERE 与存储过程
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
sql - IF 内部 WHERE 与存储过程
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
.net - 对声明为友元的类进行单元测试(内部)
在我的一些测试帮助程序代码中，我有一个名为 FakeDbSet(Of T) 的 IDbSet(Of T) 实现，它模拟了许多 EF 行为，但没有实际的数据库。我将类声明为 Friend ，因为我想强制
Cassandra 批量插入操作，内部
我正在寻找 Cassandra/CQL 的常见 SQL 习语 INSERT INTO ... SELECT ... FROM ... 的表亲。并且一直无法找到任何以编程方式或在 CQL 中执行此类操作
java - 内部 while 循环永远不会完成
如何防止内部 while 循环无限运行？问题是，如果没有外部 while 循环，内部循环将毫无问题地运行。我知道它必须对外循环执行某些操作，但我无法弄清楚是什么导致了问题。 import java.u
C++ union 内部
我正在努力学习更多有关 C++ 的知识，但在国际象棋程序中遇到了一些代码，需要帮助才能理解。我有一个 union ，例如: union b_union { Bitboard b; st
php - 内部 while 循环不工作
这是我项目网页中的代码片段。这里我想显示用户选择的类别，然后想显示属于该类别的主题。在那里，用户可以拥有多个类别，这没有问题。我可以在第一个 while 循环中打印所有这些类别。问题是当我尝试打印主题
java - 内部 JFrame
我想知道如何在 swing 中显示内部框架。这意味着，当需要 JFrame 时，通常我所做的是， new MyJFrame().setVisible(true); 假设之前的表单也应该显示。当显示这个
Python 内部 - 对象如何知道全局变量？
我最近发现了一些有趣的行为，这让我想知道对象如何知道存在哪些全局变量。例如，假设我有一个文件“test.py”: globalVar = 1 toDelete = 2 class Test(objec
javascript - 将元素拖放到谷歌地图外部/内部
我知道它已经在这里得到回答: google maps drag and drop objects into google maps from outside the Map ,但这并不完全是我所需要的
JavaScript 内部 HTML
我目前正在学习Javascript DOM和innerHTML，发现在理解innerHTML方面存在一些问题。这是我的代码:http://jsfiddle.net/hphchan/bfjx1w70/
c++ - 内部/外部标题分离
我构建了一个布局如下的库: lib/ private_class_impl.cc private_class_decl.h public_class_impl.cc include/
html - 缩小列边距(内部)
我有一个使用 bootstrap 3 的组合 wordpress 网站。它基本上是一个图像网格。当屏幕展开时，它会从三列变为四列。移动时它是一列。我想出了如何调整图像的顶部和底部边距，但我希望图像的
c - 内部 for 循环被忽略
我正在试用 MSP-EXP430G2 的教程程序，使用 Code Composer Studio 使 LED 闪烁。最初，它有一个闪烁的无限循环: for(;;) // This emp

首页

博学

6Ren·AI

商城

javascript - 强制内部 iframe 内容在页面加载时滚动到顶部