如何在提交后关闭颜色框窗口，并刷新父页面上的图像

How to close colorbox window after submit, and refresh image on parent page?

本文关键字：刷新 图像 窗口 提交 颜色      更新时间：2023-09-26

我使用colorbox作为模式显示，当用户点击图像进行更新时，它会为用户打开。一旦用户上传了新图像并在colorbox模式上点击提交，模式应该会关闭并刷新父页面上的图像。

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

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

这将关闭模态并刷新父页面.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>

有什么想法吗？

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

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

这是特定于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中的图像。

图像很可能被缓存在浏览器中，给图像控件一个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">

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

相关文章：