jQuery - 当按钮在iFrame内部单击时移动到页面顶部 [英] jQuery - Move to top of page when button clicked inside of an iFrame
问题描述
我有一个标准格式的.html文件，它存在于一个iFrame中。表单被填充，然后通过表单底部的提交按钮提交。由此产生的动作发生在窗体的顶部和一些设备上，这意味着点击按钮时窗体的顶部不可见（不在浏览器窗口的顶部）。
我有一个按钮的.click事件，在这个事件中我有：
$ b $ pre $ window.scrollTo（0， 0）;
在将表单放置在iFrame中之前，它工作得很好，但它不能在iFrame中工作。
我如何从iFrame中完成相同的操作？我需要滚动到页面的顶部，而不只是到iFrame的顶部。我也尝试了下面的代码：
$（'html，body'）。animate（{scrollTop：$（body ）.offset（）。top}，500）;
但它也不起作用。
HTML表单由domain1.com提供，iFrame驻留在domain2.com上的一个页面中。
$ b
DOMAIN1.COM/index.html：
< html>
< script type =text / javascript>
// EVENT Handler - 表单提交
$（function（）{
$（＃btnSubmit）。bind（'click'，function（event）{
...需要滚动到DOMAIN2.COM顶部的代码...
}）;
}）;
< / script>
< body>
< form>
< input type =submitid =btnSubmitvalue =Submit/>
< / form>
< / body>
< / html>
DOMAIN2.COM/index.html：
< html>
< body>
< iframe src =http://domain1.com/index.html>< / iframe>
< / body>
< / html>
请不要评论这段代码的缺失属性。我没有做一个复制/粘贴，我只是快速输入它，以便大致了解我想要完成的任务。我知道上面缺少的重要属性。 ; - ）
我想你的iframe和你的主页在同一个域中。
试试这个：
$ p $ window.parent.scrollTo（0， 0）;
window.parent 是您的窗口主页，而窗口是您当前的iframe窗口。 $ b
如果您的iframe和您的窗口位于不同的域中， code> window.parent 直接像这样。您需要使用 window.postMessage 进行通信。
如果你使用jQuery，你可以试试这个插件。
这个想法是当iframe中的按钮被点击时，iframe会将消息发布到父页面。听到该事件的父页面将被通知并滚动到顶部。在您的案例中使用window.postMessage的示例代码（未经测试）：
$ b 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）;
函数receiveMessage（event）
{
if（event.origin！==http://domain1.com）
return;
if（event.data ==scrollTop）{
window.scrollTo（0,0）;
}
}
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. ;-)
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.
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);
}
}
这篇关于jQuery - 当按钮在iFrame内部单击时移动到页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
