滚动父框架以在iframe中定位

Scroll parent frame to anchor in iframe

本文关键字：iframe 定位 框架 滚动      更新时间：2023-09-26

我是新来的。。。希望我做的每件事都是对的-D

我发现了一些有类似问题的话题，但它们看起来不像是我想达到的。

我有一个有很长内容区的网站，网站上有滚动条。在这个内容区域的某个地方是一个iframe。这个iframe实现了一个全高的站点（一个支撑板），并在内容height发生变化时调整iframe的大小，因此iframe没有滚动条。现在我想要的是：当我用即http://www.mywebsite.com/#new打开网站时，我希望页面向下滚动到iframe，但不仅是iframe的开头，而且是锚位于该iframe内部的位置。

因此，iframe本身不需要滚动（它总是100%的高度），但父帧应该滚动到iframe内部放置锚的位置。

我真的不知道该怎么解决。将锚添加到iframes url没有帮助，而且仅将锚添加至网站url也不起作用。我确信我必须用javascript或类似的东西来实现，但不知道如何实现！我可以修改两者的代码-iframe内的网站和父网站！

//编辑
哦，我忘了。。。我不能用onClick Action或链接属性（这就是相关文章中的解决方案）来做这件事，因为它不是在同一页面内跳转。页面正在重新加载，应该跳转到锚点：-D所以当我自己输入URL时，它必须工作
希望你能理解我的需要！

//编辑2可能的框架：

  • 主页是wordpress博客，所以JQuery是可能的
  • Iframe页面是一个简单的机器论坛（SMF）-我认为这里只有原生JS

这里有一个答案，可以让你"走上正确的道路"。

假设iFrame在主页面内始终处于同一位置，则需要将主页面滚动到此位置：iFrame y坐标+iFrame内的锚点坐标。

所以我会叫你锚：<a name="anchor1">Here</a>，你iFrame：<iframe id ="myiFrame" ...

要获取页面中的iframe位置，可以使用$("#myiFrame").position().top，并使用$("#myiFrame").contents().find('a[name=anchor]').position().top获取iframe内部的锚点位置。

所以你的脚本moght看起来像：

var y = $("#myiFrame").position().top + $("#myiFrame").contents().find('a[name=anchor]').position().top;
$(window).scrollTop(y)
相关文章：