提交后如何关闭彩盒窗口，并刷新父页面上的图像？

Question

我正在使用 colorbox 进行模态显示，当用户单击图像进行更新时，它会为用户打开。用户上传新图片并在颜色框模式上点击提交后，模式应关闭并刷新父页面上的图片。

我在提交按钮中使用了以下 onClick 事件：

  <input onClick='window.parent.location.reload(true);' type='submit' value='Submit' name='save_button' id='save_button'>

这将关闭模式并刷新父 page.php。但是由于某种原因，它不会刷新旧图像以显示用户刚刚上传的新图像。

编辑：添加颜色框代码

调用颜色框的脚本与其他javascript代码冲突，所以我在颜色框代码上方添加了以下脚本，并将代码中的$更改为jQuery：

<script>jQuery.noConflict();
  jQuery(document).ready(function(){
  jQuery("iframe").hide();
  });

  $('input').hide();
</script>

<script>
  jQuery(document).ready(function(){
  jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%"});
  });
</script>

有什么想法吗？

Answer 1

浏览器会创建一个缓存以加快浏览速度，如果刷新页面后您的图像 src[位置] 相同，则浏览器会向您显示图像的先前副本。您必须在每次重新加载时更改图像 src 属性的目标或通过函数执行相同操作，如下所示：

$('img').each(function(){
$(this).attr('src',$(this).attr('src')+Datetime.now());
});

Answer 2

这是特定于 colorbox 脚本的代码，它最终为我工作。我在下面脚本的最后部分添加了onClosed:function(){ location.reload(true); }：

<script>jQuery.noConflict();
  jQuery(document).ready(function(){
  jQuery("iframe").hide();
  });

  $('input').hide();
</script>

<script>
  jQuery(document).ready(function(){
  jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
  });
</script>

然后我在提交按钮代码中添加了onClick事件：

<input type='submit' value="Submit' onClick='parent.jQuery.fn.colorbox.close();'>

这会在刷新父页面的同时关闭彩盒模式，以及所有当前版本的 FF、IE、Opera 和 Chrome 的图像。它刷新页面，但不刷新 Opera 中的图像。

Answer 3

图片很可能缓存在浏览器中，给你的图片控件一个 ID 并调用 window.parent.document.getElementID("image").src += "?" + [some random number, or maybe the miliseconds]; 这将导致它返回服务器并重新加载图片。

编辑

更充实的脚本：

<script language="javascript" type="text/javascript">
  function onSubmitClick(){
    parent.jQuery("#img")[0].src += "?" + Math.floor(Math.random()*1001);
    //note the above will append a random number between 0 and 1000 to the src.
    parent.jQuery.colorbox.close()
  }
</script>

<input onClick='onSubmitClick();' type='submit' value='Submit' name='save_button' id='save_button'>
<img src="pic.jpg" id="img">

我还意识到我的建议中的一个失败之处是，当重新加载页面时，它只会再次从缓存中加载相同的图像。所以这个脚本是在不刷新页面的情况下编写的。