可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a .html with a standard form that lives within an iFrame. The form gets filled and then submitted with a submit button at the bottom of the form. The resulting action occurs at the top of the form and on some devices that means that the top of the form is not visible (off the top of browser window) when the button is clicked.

I have a .click event for the button and inside that event I have:

window.scrollTo(0,0);

This worked fine prior to placing the form within the iFrame, but it does not work from within the iFrame.

How can I accomplish the same from within an iFrame? I need to scroll to the top of the page, not just to the top of the iFrame. I tried the following code also:

$('html, body').animate({scrollTop: $("body").offset().top}, 500);

but it does not work either.

The HTML form is served from domain1.com, the iFrame resides in a page on domain2.com.

DOMAIN1.COM/index.html:

<html>

    <script type="text/javascript">

    // EVENT Handler - Form Submission
    $(function () {
        $("#btnSubmit").bind('click', function (event) {
            ...code needed to scroll to top on DOMAIN2.COM...
        });
    });
    </script>

    <body>
        <form>
            <input type="submit" id="btnSubmit" value="Submit" />
        </form>
    </body>
</html>

DOMAIN2.COM/index.html:

<html>
    <body>
        <iframe src="http://domain1.com/index.html"></iframe>
    </body>
</html>

Please don't critique me on missing attributes of this code. I am not doing a copy/paste, I just typed it in quickly to give a general idea of what I'm trying to accomplish. I know there are essential attributes missing above. ;-)

回答1:

I suppose that your iframe and your main page are on the same domain.

Try this:

window.parent.scrollTo(0,0);

window.parent is the window of your main page while window is your current iframe's window.

DEMO

If your iframe and your window are on different domains, you cannot access window.parent directly like this. You need to use window.postMessage to communicate.

If you use jQuery, you could try this plugin.

The idea is when the button inside the iframe is clicked, the iframe will post a message to the parent page. The parent page listening to that event will be notified and scrolls itself to top. Sample code using window.postMessage in your case (not tested):

DOMAIN1.COM/index.html:

$(function () {
     $("#btnSubmit").bind('click', function (event) {
            window.postMessage("scrollTop","http://domain2.com");
     });
});

DOMAIN2.COM/index.html:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://domain1.com")
    return;

  if (event.data == "scrollTop"){
      window.scrollTo(0,0);
  }
}

回答2:

I am not sure but you must use :-

$(window).animate({scrollTop: $("body").offset().top}, 500);

instead of

$('html, body').animate({scrollTop: $("body").offset().top}, 500);

回答3:

try the below

    window.parent.$("body").animate({scrollTop:0}, 'slow');

Keep in mind that the iframe and the body should be able to communicate. Meaning, they both should share the same domain. Say parent is abc.xyz.com the iframe cant be abc1.xyz1.com.