Prevent location.hash in an iframe from scrolling the parent window in Chrome

Minoubsiffiny

New Member
The scenario: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).The problem: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:[*]To inhibit scrolling in the app I have body {overflow:hidden;}[*]To allow for positioning I use a wrapper container set to the size of the viewport.[*]To simulate the scrolling I am either repositioning the wrapper absolutely, or positioning content within the wrapper absolutely.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:Step 1) Click 'Link to content', that will reposition the wrapperStep 2) Click 'Link to load', that will load the iFrame contentDemo: http://jsfiddle.net/w47GT/8/embedded/result/Fiddle: http://jsfiddle.net/w47GT/8/The code:CSS:\[code\]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; }\[/code\]HTML\[code\]<div class="wrapper"> <div class="background"></div> <a class="link" href="http://stackoverflow.com/questions/15883669/#linked">Link to content</a> <a class="anchor" name="linked" href="http://www.smashingmagazine.com#footer" >Link to Load iFrame</a></div><iframe></iframe>\[/code\]JS\[code\]$(function(){ $('.link').on('click',function(){ $('.wrapper').css({top:'-400px'}); }); $('.anchor').on('click',function(e){ e.preventDefault(); var href = http://stackoverflow.com/questions/15883669/$(this).prop('href'); $('iframe') .attr({ src: href, name: 'testing' }); });});\[/code\]
 
Top