javascript 关闭 Iframe Modal 框后刷新父页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5068441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh parent page after closing Iframe Modal box
提问by Hanny
The basics: I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).
基础知识：我有一个网页，用户可以在其中“添加文章”；当他们点击“添加文章”时，它会打开一个 iframe（一个弹出式模式框）。
In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.
在 Iframe 中有一个带有“保存”和“取消”按钮的表单——我想要做的是让它在用户点击“保存”时关闭模态框，然后刷新页面。
I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new article)
我已经设置好 iframe 关闭并将数据保存到数据库中，但我无法刷新页面（然后会显示新文章）
I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.
尽管谷歌搜索了好几天，但我仍然无法做到这一点。我不是 javascript 专家，但在过去的几天里我学到了足够的东西来做一两件事。
Here is the code for the button:
这是按钮的代码：
<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">
Here is the end of the javascript function that handles the saving of the data:
这是处理数据保存的 javascript 函数的结尾：
function submitbutton(pressbutton) {
...
<?php endif; ?>
submitform( pressbutton );
parent.$('sbox-window').close();
}
}
回答by Hanny
http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.
该链接是我正在寻找的修复程序 - 这个问题最初针对 Joomla 的 K2 组件。
Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.
我自己和另一个人能够通过编写我们自己的一些代码来解决这个问题。在该线程以及回复中链接的线程中，找到了解决方案。
EDIT: A request was made to post the solution here, so here's a short summary
编辑：已提出在此处发布解决方案的请求，因此这是一个简短摘要
If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:
如果您有用户从前端创建文章，并且您希望“保存”按钮关闭在他们添加或编辑文章时弹出的模型框窗口 - 只需按照以下步骤来实现：
*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.
*注意：还有一些其他修复可以关闭框，但不会刷新页面 - 这两者都可以。
The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.
关键是通过用户单击“保存”时创建的 URL 传递一个额外的参数，然后我们只需检查该参数（我将称之为“步骤”）是否存在——如果存在，我们刷新页面。
Lets follow along, first we must add this parameter to the URL created -
让我们继续，首先我们必须将此参数添加到创建的 URL -
Open the item.php file located at:
打开位于以下位置的 item.php 文件：
Yoursite->administrator->components->com_k2->models->item.php
Yoursite->administrator->components->com_k2->models->item.php
On or around line 646 - you will see some text that resembles:
在第 646 行或附近 - 您将看到一些类似于以下内容的文本：
case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;
So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:
所以我们需要做的是将我们的参数添加到该 URL 中，使其看起来像这样（请记住，我将参数称为 'step'，并将其设置为 =1） - 代码现在将如下所示：
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';
Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!
现在，当用户单击“保存”时，参数“步骤”正在传递，并且当表单重新加载以向用户显示他们输入的信息时，步骤=1！
So then we have to add the php to check for that - that's simple enough:
那么我们必须添加 php 来检查它——这很简单：
Open the form.php file located at:
打开位于以下位置的 form.php 文件：
Yoursite->components->com_k2->views->item->tmpl->form.php
Yoursite->components->com_k2->views->item->tmpl->form.php
In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.
在那里您可以看到表单实际开始的位置（在第 249 行或附近），我们想要做的只是添加一点 php 来检查我们的 'step' 参数是否等于 1。如果是 -我们将使用一些 javascript 刷新父页面，这将自动关闭模型框并导致“项目已保存”文本显示给用户，让他们知道发生了什么。
The existing code looks like :
现有代码如下所示：
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<table class="toolbar" cellpadding="2" cellspacing="4">
When finished it will look like this:
完成后，它看起来像这样：
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
<script language="javascript">
var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
method: 'get'
});
dummy = $time() + $random(0, 100);
XHRCheckin.request("t"+dummy);
parent.$('sbox-window').close();
window.parent.location.reload();
</script>
<?php } ?>
<table class="toolbar" cellpadding="2" cellspacing="4">
That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.
这会检查 'step' 是否为 =1。如果是 - 它运行 javascript 来刷新父窗口 - 关闭框并自动刷新页面。它还检查后端的文章。
This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.
这确保了对用户来说最简单的事情（即他们不必单击“返回”和“刷新”，这是非常违反直觉的）并为前端用户提供后端体验。
I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.
我希望这可以帮助人们 - 在我想到这个解决方案之前，我花了很多时间在错误的方向上追逐事情。
I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!
我很伤心开发人员从来没有帮助过影响这么多人的事情，但是哦 - 问题解决了！
回答by Andrew Wei
Check out jQuery fancyBox.
查看 jQuery花式框。
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
FancyBox 是一种工具，它提供了一种漂亮而优雅的方式来为网页上的图像、html 内容和多媒体添加缩放功能。它建立在流行的 JavaScript 框架 jQuery 的顶部，既易于实现又易于定制。
It' has a "Reload page after closing", function.
它具有“关闭后重新加载页面”功能。
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
回答by Rui Jiang
Try window.location.reload
试试 window.location.reload
You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.
你还想摆脱“返回假”；来自您的 onclick 处理程序。这可能会阻止页面刷新。此外，一般来说，将任何“返回”语句放在事件处理函数中。
回答by Sam Dufel
I think you're looking for
我想你正在寻找
parent.location.reload();
Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.
顺便说一句，您实际上并不需要关闭 iframe - 一旦您重新加载父页面，它无论如何都会消失。
