通过在Chrome中滚动父窗口来阻止iframe中的location.hash [英] Prevent location.hash in an iframe from scrolling the parent window in Chrome
问题描述
方案:
我正在构建一个在Chrome中运行的自助服务终端应用。在其中我通过带锚的链接(http:/www.whatever.com/#specific_content)将来自另一个域的iframe加载到模态中。
I'm building a kiosk app to run in Chrome. In it i'm loading an iframe from another domain into a modal via a link with an anchor (http:/www.whatever.com/#specific_content).
问题:
当内容加载时,iframe会跳转到#specific_content,但父页面也会跳转。
When that content loads, the iframe jumps down to the #specific_content but the parent page also jumps.
这是一个单页自助服务终端应用程序,因此父页面的位置非常重要。
场景的实际细节比上面的更复杂:
It's a single page kiosk app so the position of the parent page is very important. The actual details of the scenario are a bit more complicated than just the above:
- 要禁止在应用程序中滚动我有body {overflow:hidden;}
- 为了允许定位,我使用一个设置为视口大小的包装器容器。
- 模拟滚动我要么绝对重新定位包装器,要么绝对在包装器中定位内容。
为了证明问题,我设置了一个jsFiddle但是你需要看看没有jsFiddle chrome的输出才能看到问题的全部范围:
To demonstrate the problem I have set up a jsFiddle but you need to see the output without the jsFiddle chrome to see the full scope of the problem:
步骤1)点击'链接到内容',这将重新定位包装器
Step 1) Click 'Link to content', that will reposition the wrapper
步骤2)点击链接加载,这将加载iFrame内容
Step 2) Click 'Link to load', that will load the iFrame content
演示: http://jsfiddle.net/w47GT/8/embedded/result/
小提琴: http://jsfiddle.net/w47GT/8/
代码:
CSS:
html, body { height:100%; padding:0; margin: 0;overflow:hidden; }
.background {
width : 100%;
height:400%;
background:#333 url('http://incurablystircrazy.files.wordpress.com/2012/04/runner-at-sunset.jpg');
}
.wrapper { position:absolute;width:100%;height:200%; }
iframe { width:50%;height:50%;position:fixed;top:25%;left:50%;margin-left:-25%;border:2px solid red;background-color:#ddd; }
.link { width:100%;height:25px;position:absolute;top:25px;background-color:green; }
.anchor { position:absolute;top:400px;width:100%;height:25px;background-color:red; }
HTML
<div class="wrapper">
<div class="background"></div>
<a class="link" href="#linked">Link to content</a>
<a class="anchor" name="linked" href="http://www.smashingmagazine.com#footer" >Link to Load iFrame</a>
</div>
<iframe></iframe>
JS
$(function(){
$('.link').on('click',function(){ $('.wrapper').css({top:'-400px'}); });
$('.anchor').on('click',function(e){
e.preventDefault();
var href = $(this).prop('href');
$('iframe')
.attr({
src: href,
name: 'testing'
});
});
});
推荐答案
答案可以在这里找到:带有指定#element的加载iframe会移动父视点到同一地点
Answer can be found here: Loading iframe with an #element specified moves the parent viewpoint to the same location
解决方案:
隐藏iFrame直到它完全加载后绕过影响父页面的锚点。
Hide the iFrame until after it's fully loaded which bypasses the anchor effecting the parent page.
演示: http://jsfiddle.net/w47GT/12/embedded/result/
小提琴: http://jsfiddle.net/w47GT/12/
JS
$(function(){
// Move the content wrapper up to simulate scroll
$('.link').on('click',function(){ $('.wrapper').css({top:'-400px'}); });
// Load iFrame content (previously hidden via CSS)
$('.anchor').on('click',function(e){
e.preventDefault();
var href = $(this).prop('href');
$('iframe')
.attr({
src: href,
name: 'testing'
}).on('load',function(){
$(this).show();
});
});
});
感谢@ DJdavid98指向这个答案。
thanks to @DJdavid98 for pointing to this answer.
这篇关于通过在Chrome中滚动父窗口来阻止iframe中的location.hash的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!