Prevent page to jumping to iframe

问题:

I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.

From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?

With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.

On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.

I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.

https://jsfiddle.net/dbruning22/c0s6mhkv/6/

HTML

<header>
  Some Header information and navigation
</header>
<div class="main">
  <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>

CSS

header { 
  background: green;
  height: 600px;
}

回答1:

You can put an anchor at the top of your page like this:

HTML

<header>
<a id="focus" href="#focus"></a>
  Some Header information and navigation
</header>

On page load use this JS:

document.getElementById("focus").focus();

回答2:

Here's a "hack" that disables autoscrolling completely, just redefine the function window.scrollTo() to a no-op:

window.scrollTo = function () {};

回答3:

This worked for me:

1) You initially hide the iframe by setting the display to none:

<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;"  frameborder="0">

2) Once the page has loaded, then show the iframe using jquery or javascript:

window.onload = function ()
{
    $("#bmap").show();
}

This worked for me across browsers