iframe内的accordion跳到父对象的顶部
iframe是HTML中的一个标签，用于在网页中嵌入另一个网页。accordion是一种常见的用户界面元素，通常用于展示可折叠的内容区域。
当在iframe内的accordion中的某个折叠项被点击时，想要将父对象（即包含iframe的页面）滚动到顶部，可以通过以下步骤实现：
- 在iframe内的accordion中，为每个折叠项的点击事件绑定一个函数。
- 在这个函数中，使用JavaScript的
window.parent属性来获取父对象的引用。 - 使用
window.parent.scrollTo()方法将父对象滚动到顶部。
下面是一个示例代码：
<!-- 父页面 -->
<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<iframe src="子页面.html"></iframe>
</body>
</html>
<!-- 子页面 -->
<!DOCTYPE html>
<html>
<head>
<title>子页面</title>
<style>
.accordion {
/* 样式定义 */
}
</style>
<script>
// 绑定折叠项点击事件
function bindAccordionClickEvent() {
var accordionItems = document.querySelectorAll('.accordion');
for (var i = 0; i < accordionItems.length; i++) {
accordionItems[i].addEventListener('click', function() {
// 获取父对象的引用
var parentWindow = window.parent;
// 将父对象滚动到顶部
parentWindow.scrollTo(0, 0);
});
}
}
// 页面加载完成后执行绑定
window.addEventListener('load', bindAccordionClickEvent);
</script>
</head>
<body>
<div class="accordion">折叠项1</div>
<div class="accordion">折叠项2</div>
<div class="accordion">折叠项3</div>
</body>
</html>在这个示例中，当子页面中的任何一个折叠项被点击时，父页面将滚动到顶部。
请注意，以上示例中没有提及任何特定的云计算品牌商或产品。如果您需要在特定的云计算平台上实现类似的功能，您可以参考该平台的文档或开发者指南，以了解如何在其环境中操作iframe和滚动页面的方法。
相关·内容
我有一个Drupal客户端站点，它使用iframe加载内容的主体。最近，我为常见问题部分构建了一个纯html/css手风琴。手风琴在iframe外部按预期工作。但是，一旦在iframe中，在文件夹下方呈现的项目(用户滚动查看的任何项目)会导致页面在单击时跳到顶部。父级会增长以适合内容，但如果面板关闭，则不会缩小。我不确定这是Drupal的问题，还是我的代码中会导致父页面跳
浏览 10提问于2019-10-25得票数 0
我有一个父页面，在页面的中间包含一个iFrame (相同的域，可以访问这两个域)。，所以我在iFrame标记中有一个onload命令，它使页面在每次刷新/加载iFrame时自动返回到iFrame的顶部。问题是，在第一次加载父页面时，它也会立即滚动到iFrame的顶部，因为iFrame的内容在父页面之后加载一两秒钟。因此
浏览 4提问于2017-11-10得票数 0
回答已采纳
我有一个有点长的iframe，一旦按下提交按钮，我就想跳到页面的顶部(我使用的是ASP.NET，一旦表单提交，iframe中就会显示一个新的面板)。问题是我的iframe与我的父页面在不同的域上。这是我到目前为止所知道的：<script> wind
浏览 0提问于2013-04-10得票数 1
1回答
我想在我的页面中实现跳过导航链接。所有这些跳过导航链接都位于页面顶部。页面包含加载主要内容的iframes。我想要的是，当用户点击页面顶部的“跳到主要内容”链接时，焦点应该放在iframe内的特定元素上。阿米特
浏览 1提问于2011-08-02得票数 0
4回答
我有一个网页与一个应用程序运行在一个iframe (相同的域)。iframe的高度是根据iframed文档的高度在加载时设置的。问题是当iframed文档的大小改变时(通过展开折叠面板、菜单等)。当这种情况发生时，有没有触发的事件，我可以用来相应地调整iframe元素的大小？我尝试绑定到iframe中window对象上的resize事件，但由于当文档内容更改时窗口
浏览 1提问于2011-09-01得票数 1
2回答
iframe中的手风琴
、、、
我有一个场景，我的iframe通过onclick函数动态加载。 $(function() {有什么解决方案吗？Iframe代码：
<%@ page language="java" contentT
浏览 2提问于2014-07-25得票数 0
它会在没有动画的情况下直接跳到顶部。return false; });按钮：整个过程都嵌入在本地域的父页面中的iframe中。当我单独打开iframe时，动画也可以在Chrome中运行！
浏览 1提问于2012-02-17得票数 0
回答已采纳
当我呈现元素并将它们附加到父div时，我的屏幕一直跳到最底层的元素，因为它正在被加载，而不是加载它们，并让视图停留在当前视图中。所以在开始的时候，它应该在屏幕的顶部，而不是跳到底部，当我向下滚动的时候，它会呈现更多的元素，在其他的负载下，它也应该停留在那个位置。
这是我的js文件中本质上的代码。= document.createElement('div&
浏览 1提问于2016-08-25得票数 4
回答已采纳
我在iframe中运行Angular 9 SPA，并使用davidjbradshaw iframe-resizer动态调整iframe的大小以适应角度页面，这样用户就永远看不到iframe内的滚动条了在超过视口高度的有角度的页面上，ngb模式弹出窗口通常显示在视口之外。然后用户必须滚动父页面才能找到弹出窗口。为简单起见，我希望在IFramed页面顶部附近显示弹出窗口，并将父页面滚动
浏览 42提问于2020-11-11得票数 0
2回答
我使用的是jQuery UI accordion，但有些文本太长，导致页面顶部较整齐。我想要的是，当一个部分被打开时，它会跳到该部分的顶部。这段代码可以很好地做到这一点，但它会被贴到顶部，这看起来很糟糕。$('#accordion').bind('click',function(){$(window).scrollTop(theOff
浏览 0提问于2013-04-03得票数 7
回答已采纳
好吧，是这样的。当单击iframe内的任何内容时，主页(iframe父页面)将重新加载。我如何拥有它，这样如果通过在iframe内单击重新加载iframe父对象，则会传递某个布尔值或其他值，从而显示不同的内容。对于iframe，我使用的是
opener.location.reload
浏览 0提问于2010-04-24得票数 0
回答已采纳
3回答
因此，我目前正在开发一个小型的styleguide应用程序，它的部分功能是有一个沙盒区域，可以将某些模块加载到iframe中(以便能够模拟媒体查询)。现在，在创建iframe以及相关的样式和脚本之后，将动态插入此内容。 <!();为了澄清，代码是直接放在iframe
浏览 1提问于2015-01-27得票数 0
我正在处理一个项目，该项目有许多在父窗口中打开和关闭的iframe。我有一个需要在iframe之间定义和共享的对象。我遇到的问题是，当在顶部创建对象的iframe被关闭时，与其关联的函数将会丢失。有没有一种方法可以在顶部定义一个对象，即使在原始的iframe超出范围之后，也可以从我的i
浏览 0提问于2012-03-03得票数 1
回答已采纳
基本上我有一个父<div>，里面有一个<iframe>。我需要iframe内的一个元素作为拖动父div的手柄。这有可能吗？我试过了：$(node).draggable("opt
浏览 0提问于2010-08-06得票数 6
回答已采纳
1回答
使用大卫·J·布拉德肖的惊人的 JavaScript库。包含表单的跨域iFrame在表单提交后正在正确地缩小大小。但是，父页面不遵循子节点内的锚链接，该链接将提交文件重定向到表单容器的顶部。因此，包含的iFrame离开了位置，甚至超出了视觉范围。
<script type="text/javascript" src="./iframeResiz
浏览 4提问于2015-12-10得票数 4
回答已采纳
1回答
我有一个引导模式弹出，如果网页不在iframe中的话，效果很好，如下所示：但是，当它在iframe内时，模式弹出锚会弹出到iframe的顶部，完全忽略用户的滚动位置：
为了解决这个问题，我尝试根据iframe中的滚动位置手动设置模式弹出的顶部属性，但是$(window).scrollTop()和其他变体都从iframe中返回0或4
浏览 0提问于2016-04-04得票数 1
我成功地更改了IFRAME位置的哈希值()，但是当函数被触发时，我不知道如何阻止父级跳到IFRAME的顶部。window.location.hash = id;另外，作为参考，我使用的函数如下
浏览 0提问于2013-01-26得票数 2
回答已采纳
nodisplay"> <amp-iframeallow-scripts allow-same-origin allow-popups" frameborder="0" src="https://ampbyexample.com&#x
浏览 1提问于2017-07-28得票数 5
1回答
因此，我有一个iframe嵌入在一个网站，其中运行一个简单的停止手表。这只不过是一个递归超时。然而，在那里重复的DOM更改会导致父网站的内容“闪烁”，而内部的iframe网站则会跳到顶部。这使得在iframe内容上滚动是不可能的，因为即时跳转到页面顶部。这个问题似乎只出现在移动浏览器中(在iOS Safari10.3.2中进行了测试)，而间隔的持续时间与此无关(在
浏览 2提问于2017-06-02得票数 0
回答已采纳
2回答
我可以使用下面的jquery从父html触发accordion (实现为div)：
jQuery(iframe).contents().find('#XYZ').trigger( "click" );Accordion正在打开，但我的问题是打开的accordion隐藏在下面的某个地方，并且在屏幕上看不到。有人能建议如何从父窗口滚动到iFrame中的div吗？父项和子项都在同一域中。我尝试了.sc
浏览 3提问于2016-10-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
