Question

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

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

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

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

编辑：添加了Colorbox代码

调用颜色框的脚本与其他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 [location]相同，浏览器会显示该图像的上一个副本。你必须在每次重新加载时更改图像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">

我也意识到我的建议失败的是，当重新加载页面时，它只会再次从缓存中加载相同的图像。因此编写此脚本时不会刷新页面。

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

3 个答案: