< iframe src =" reallylongpage.html＃bottom" />不起作用 [英] <iframe src="reallylongpage.html#bottom" /> doesn't work
问题描述
我有以下嵌入式iframe
< iframe width =100％height =400src = reallylongpage.html/>
reallylongpage.html有两个锚点#top和#bottom
我希望我的iframe在页面底部加载reallylongpage.html，所以我没有做到这一点
< iframe width =100％height =400src =reallylongpage.html＃bottom/>
但是，这会产生滚动iframe和父页面的不良影响。父页面不应该滚动。这发生在Chrome和Firefox中。
这里是一个完整代码示例
parent.html
< html>
< body>
< div style =padding：100 200;>
< iframe WIDTH =100％HEIGHT =400SRC =CHILD.HTML＃BOTTOM>< / iframe>
< / div>
< div> 1< br> 2< br> 3< br> 4> 5< br> 6< br> 8< 8> BR> 12<峰; br> 13 LT峰; br> 14<峰; br> 15℃; BR> 16<峰; br> 17<峰; br> 18<峰; br> 19<峰; br> 20℃峰; br> 21<峰; br> 22℃峰; br> 23℃峰; br> 24 LT峰; br> 25℃峰; br> 26<峰; br> 27<峰; br> 28和60; BR> 29<峰; br> 30℃峰; br>< / DIV>
< / body>
< / html>
child.html
< HTML>
< body>
< a name =tophref =＃bottom>转到底部< / a>< br>
1 b 2 b 3 b 4 b 5 b 6 7 b 8 b 9 b 10 b 11 12 b 1 b 1 b 1 b 2 b 3 b 4 b 5 b 6 b 8 b 8 b 9 b 10 b 11 b 12 b 1 b 1 b 1 b 2 b 3 b 1 b 1 b 2 b 3 b 1 b 1 BR> 13 LT峰; br> 14<峰; br> 15℃; BR> 16<峰; br> 17<峰; br> 18<峰; br> 19<峰; br> 20℃峰; br> 21<峰; br> 22℃峰; br> 23℃峰; br> 24<峰; br> 25℃峰; br> 26<峰; br> 27<峰; br> 28和60; BR> 29<峰; br> 30℃峰; br>
< a name =bottomhref =＃top>返回页首< / a>
< / body>
< / html>
这就是我希望它看起来像
正确http://i38.tinypic.com/2gxh1f6.png
这是我得到的而不是
不正确的http://i33.tinypic.com/2gy0t1x。 png
这似乎是浏览器中事实上的行为（至少我找不到任何书面关于锚点和滚动的标准）。
浏览器尽量滚动所有窗口，直到所需的片段可见。 （即使您点击got to top链接，并且在您的示例中添加了padding-bottom：3000px;），您也会注意到这一点。）
请考虑使用 jQuery的scrollTo插件，它实际上为您处理相应容器的滚动位置。
用你自己的例子来演示：
托管演示：
完整资料来源：
parent.html
<！doctype html>
< html>
< head>
< title>父< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.4.2.min.js>< / script>
< script type =text / javascriptsrc =jquery.scrollTo-min.js>< / script>
< script type =text / javascript>
$（function（）{
var iframe = $（'iframe'）;
iframe.load（function（）{
iframe.scrollTo（'a [name = bottom ]'）;
}）;
}）;
< / script>
< / head>
< body>
< div style =padding：100px 200px 3000px;>
< iframe width =100％height =400src =child.html>< / iframe>
< / div>
< div> 1< br> 2< br> 3< br> 4> 5< br> 6< br> 8< 8> BR> 12<峰; br> 13 LT峰; br> 14<峰; br> 15℃; BR> 16<峰; br> 17<峰; br> 18<峰; br> 19<峰; br> 20℃峰; br> 21<峰; br> 22℃峰; br> 23℃峰; br> 24 LT峰; br> 25℃峰; br> 26<峰; br> 27<峰; br> 28和60; BR> 29<峰; br> 30℃峰; br>< / DIV>
< / body>
< / html>
child.html
<！doctype html>
< html>
< head>
< title>子< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.4.2.min.js>< / script>
< script type =text / javascriptsrc =jquery.scrollTo-min.js>< / script>
< script type =text / javascript>
$（function（）{
$（'a'）。click（function（）{
$（window）.scrollTo（'a [name ='+ this.hash.substring （1）+']'）;
return false;
}）;
}）;
< / script>
< / head>
< body>
< a name =tophref =＃bottom>转到底部< / a>< br>
1 b 2 b 3 b 4 b 5 b 6 7 b 8 b 9 b 10 b 11 12 b 1 b 1 b 1 b 2 b 3 b 4 b 5 b 6 b 8 b 8 b 9 b 10 b 11 b 12 b 1 b 1 b 1 b 2 b 3 b 1 b 1 b 2 b 3 b 1 b 1 BR> 13 LT峰; br> 14<峰; br> 15℃; BR> 16<峰; br> 17<峰; br> 18<峰; br> 19<峰; br> 20℃峰; br> 21<峰; br> 22℃峰; br> 23℃峰; br> 24<峰; br> 25℃峰; br> 26<峰; br> 27<峰; br> 28和60; BR> 29<峰; br> 30℃峰; br>
< a name =bottomhref =＃top>返回页首< / a>
< / body>
< / html>
I have the following embedded iframe
<iframe width="100%" height="400" src="reallylongpage.html" />
reallylongpage.html has 2 anchors #top and #bottom
I want my iframe to load reallylongpage.html at the bottom of the page so I did
<iframe width="100%" height="400" src="reallylongpage.html#bottom" />
But this has the undesirable effect of scrolling both the iframe AND the parent page. The parent page shouldn't scroll at all. This happens in Chrome and Firefox.
here is an example with full code
parent.html
<html>
<body>
<div style="padding:100 200;">
<iframe WIDTH="100%" HEIGHT="400" SRC="CHILD.HTML#BOTTOM" ></iframe>
</div>
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
</body>
</html>
child.html
<html>
<body>
<a name="top" href="#bottom">go to bottom</a><br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
<a name="bottom" href="#top">go to top</a>
</body>
</html>
this is what i want it to look like correct http://i38.tinypic.com/2gxh1f6.png
this is what i get instead incorrect http://i33.tinypic.com/2gy0t1x.png
This appears to be the de facto behavior in browsers (At least I couldn't find any written standard about anchors and scrolling).
The browser tries its best to scroll all windows until the desired fragment is visible. (You'll notice this even when you click on the "got to top" link and also if you add "padding-bottom: 3000px;" to the div in your example.)
Consider using jQuery's scrollTo plugin which actually manipulates scroll position of the appropriate container for you.
To demonstrate with your own example:
Hosted Demos:
Full Source:
parent.html
<!doctype html>
<html>
<head>
<title>parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function(){
var iframe = $('iframe');
iframe.load(function(){
iframe.scrollTo('a[name=bottom]');
});
});
</script>
</head>
<body>
<div style="padding:100px 200px 3000px;">
<iframe width="100%" height="400" src="child.html"></iframe>
</div>
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
</body>
</html>
child.html
<!doctype html>
<html>
<head>
<title>child</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(window).scrollTo('a[name=' + this.hash.substring(1) + ']');
return false;
});
});
</script>
</head>
<body>
<a name="top" href="#bottom">go to bottom</a><br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
<a name="bottom" href="#top">go to top</a>
</body>
</html>
这篇关于< iframe src =" reallylongpage.html＃bottom" />不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![不正确的http://i33.tinypic.com/2gy0t1x。 png](\"http://i33.tinypic.com/2gy0t1x.png\"){kind=link}
