如何将 iframe 中的 div 滚动到另一个 iframe 中的锚点
How to scroll div in iframe to an anchor from another iframe
不知道标题对你是否有意义,让我扩展一下:
我有一个基础 html 文件,其中包含 iframe1
等内容。 iframe1
包含 6 个 link 应该 link 锚定在 iframe2
中的 div
中; iframe2
用 target="_self"
代替 iframe1
加载。现在,诀窍是它应该滚动 div
,而不是 iframe2
本身,因为 iframe2
中还有其他内容应该留在视图中。
很多搜索都没有让我找到任何地方,所以我什至不知道这是否可行,所以我想我会在这里尝试一下,然后被迫将整个复杂的结构重新设计为别的东西。我是 javascript 的新手,但我知道函数或变量是什么 :) 谢谢。
所以,在 master html 我有:
<div class="content">
<iframe class="iframes" src="iframes/i-servlinks.html"></iframe>
</div>
在 iframe1 中(这里称为 i-servlinks.html
)我有 6 个:
<div class="works">
<a class="worklinks" href="i-servs.html" target="_self">Linktoanchor</a>
</div>
在 iframe2 中(这里称为 i-serv.html
)我有:
<div class="servlinks">
<a class="tab-item" href="#link1">1</a>
<a class="tab-item" href="#link2">2</a>
<a class="tab-item" href="#link3">3</a>
<a class="tab-item" href="#link4">4</a>
<a class="tab-item" href="#link5">5</a>
<a class="tab-item" href="#link6">6</a>
</div>
<div class="servs">
<!-- a lot of text, with the 6 anchors spread out in it, and this is the div that should scroll, servlinks div should stay in view on top of iframe2 -->
</div>
我认为您需要使用一些 Javascript 来覆盖默认的滚动行为。我创建了一个 jsFiddle 来说明。
$('a').on('click',function(e){
e.preventDefault();
var $this=$(this);
var id = $this.attr('href');
var offset = $(id)[0].offsetTop;
var wrapY=$('.wrap')[0].offsetTop;
$('.wrap').scrollTop(offset-wrapY);
});
好吧,我放弃了,在尝试了一千个 scrollTo 类型的插件和脚本之后,它在我的设置中无法正常工作。因此,我将 iframe1
和 iframe2
的内容移动到我的主 html
中,并将 iframe1
放入保留 [=11 的内容的 div
中=] 就在主 container
之外,直到我用 6 个链接 onclick
中的任何一个隐藏它(有两行 javascript
)。我修改了我的 html
和 css
一点,然后 BANG,它就像一个魅力。
相同的功能,但实际上更简洁,文件和脚本更少。所以这只是证明越简单的想法通常越好。
不知道标题对你是否有意义,让我扩展一下:
我有一个基础 html 文件,其中包含 iframe1
等内容。 iframe1
包含 6 个 link 应该 link 锚定在 iframe2
中的 div
中; iframe2
用 target="_self"
代替 iframe1
加载。现在,诀窍是它应该滚动 div
,而不是 iframe2
本身,因为 iframe2
中还有其他内容应该留在视图中。
很多搜索都没有让我找到任何地方,所以我什至不知道这是否可行,所以我想我会在这里尝试一下,然后被迫将整个复杂的结构重新设计为别的东西。我是 javascript 的新手,但我知道函数或变量是什么 :) 谢谢。
所以,在 master html 我有:
<div class="content">
<iframe class="iframes" src="iframes/i-servlinks.html"></iframe>
</div>
在 iframe1 中(这里称为 i-servlinks.html
)我有 6 个:
<div class="works">
<a class="worklinks" href="i-servs.html" target="_self">Linktoanchor</a>
</div>
在 iframe2 中(这里称为 i-serv.html
)我有:
<div class="servlinks">
<a class="tab-item" href="#link1">1</a>
<a class="tab-item" href="#link2">2</a>
<a class="tab-item" href="#link3">3</a>
<a class="tab-item" href="#link4">4</a>
<a class="tab-item" href="#link5">5</a>
<a class="tab-item" href="#link6">6</a>
</div>
<div class="servs">
<!-- a lot of text, with the 6 anchors spread out in it, and this is the div that should scroll, servlinks div should stay in view on top of iframe2 -->
</div>
我认为您需要使用一些 Javascript 来覆盖默认的滚动行为。我创建了一个 jsFiddle 来说明。
$('a').on('click',function(e){
e.preventDefault();
var $this=$(this);
var id = $this.attr('href');
var offset = $(id)[0].offsetTop;
var wrapY=$('.wrap')[0].offsetTop;
$('.wrap').scrollTop(offset-wrapY);
});
好吧,我放弃了,在尝试了一千个 scrollTo 类型的插件和脚本之后,它在我的设置中无法正常工作。因此,我将 iframe1
和 iframe2
的内容移动到我的主 html
中,并将 iframe1
放入保留 [=11 的内容的 div
中=] 就在主 container
之外,直到我用 6 个链接 onclick
中的任何一个隐藏它(有两行 javascript
)。我修改了我的 html
和 css
一点,然后 BANG,它就像一个魅力。
相同的功能,但实际上更简洁,文件和脚本更少。所以这只是证明越简单的想法通常越好。