javascript - 滚动父框架以锚定在 iframe 中

Question

我是新来的...希望我做的一切都正确;-D

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

我有一个内容区域很长的网站，该网站有滚动条。此内容区域内的某处是一个 iframe。此 iframe 实现了一个全高站点(支持板)并在内容 height 发生变化时调整 iframe 的大小 - 所以 iframe 没有滚动条。现在我想要的是:当我用 http://www.mywebsite.com/#new 打开网站时，我希望页面向下滚动到 iframe 但不仅是 iframe 的开头，还有 anchor 在 inside 此 iframe 中的位置。

所以 iframe 本身不需要滚动(它总是 100% 高度)但是父框架应该滚动到 iframe 内部的位置> - anchor 已放置。

我真的不知道怎么解决这个问题。将 anchor 添加到 iframe 网址无济于事，仅将 anchor 添加到网站网址也不起作用。我确定我必须使用 javascript 或类似的东西来实现一些东西，但不知道如何实现!我能够修改两者的代码 - iframe 内的网站和父网站!

//编辑
哦，我忘了......我不能用 onClick-Action 或链接属性(这就是相关帖子中的解决方案)来做到这一点，因为它不是同一页面内的跳转。页面正在重新加载，应该跳转到 anchor :-D 所以当我自己输入 URL 时它必须工作...
希望你明白我需要什么!

//编辑2可能的框架:

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

Answer 1

这里的答案会让您“走上正确的道路”。

假设您的 iFrame 始终位于主页内的相同位置，您需要将主页滚动到这一点:iframe y 坐标 + iFrame 内的 anchor 坐标。

所以我会叫你主播:<a name="anchor1">Here</a>而你的 iFrame:<iframe id ="myiFrame" ...

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

所以你的脚本应该是这样的:

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