Ways of action in opener form and refresh parent form

最新推荐文章于 2021-08-05 13:36:40 发布

原创最新推荐文章于 2021-08-05 13:36:40 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #PHP #Ajax #ViewUI

本文介绍了使用Thickbox插件实现iframe内表单提交后刷新父页面的方法，提供了五种不同的解决方案，包括修改Thickbox源码、利用jQuery AJAX等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Patrick
方案1: 
1.在父页head中加入以下内容
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/thickbox.js"></script>
<link href="/stylesheets/thickbox.css" rel="stylesheet" type="text/css" />

2.在父页中调用子页使用thickbox的Iframe功能如下
<a href="/contact_us_form.php?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true" class="thickbox" title="Contact Us">Contact Us</a>

3.你子页的表单要采用如下的结构，请看清楚ID号
<div id="content">
    <form id="contact_us" action="/contact_us.php" method="POST">
     ... 
    </form>
</div>

4.在子页面中加入jQuery支持，不要忘了在父页head中加入jQuery库，如第一步所示
<script language="javascript">
jQuery(function($){
    $('#contact_us').submit(function(){ 
      $.post($(this).attr('action'), function(html) { 
        $('#content').html(html)
      })
      return false
    })
})
</script>

5.如上面第三步是提交到“contact_us.php”，在其程序处理完成后，加入以下代码
die("<script>alert('表单已提交'); window.parent.tb_remove(); window.parent.location.reload();</script>");

使用thickbox层，但是事件发生在iframe层，导致只有iframe层呈现thickbox,。 


方案2: 
我们要达到iframe层事件触发的thickbox影响到整个页面，可对thickbox.js稍做修改。 

function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
});
}


function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    self.parent.tb_show(t,a,g);
    this.blur();
    return false;
});
}

方案3:
// 刷新打开本窗口的opener窗口. 
function refreshOpener(){ 
// 可能存在frame页面,所以要引用top窗口. 
var win = top.window; 
try{ 
// 刷新. 
if(win.opener) win.opener.location.reload(); 
}catch(ex){ 
// 防止opener被关闭时代码异常。 
} 
} 

// 刷新opener窗口后关闭自己。 
function refreshOpenerAndCloseMe(){ 
refreshOpener(); 
closeWin(); 
}

方案4:
1.父页面添加引用 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> 

2.父页面添加如下按钮，引用thickbox打开子窗口
<input alt="search.php?height=400&width=800" title="Search ALL" class="thickbox" type="button" value="Search ALL"/> 

3.子页面添加按钮或链接
<input id="search" type="button" value="Search"/> 
<input id="closeBT" type="button" value="Cancel"/> 

4.子页面添加相关jQuery和thickbox代码(因为父页面已经引用了jQuery和thickbox库，子页面不需要再引用)

<SCRIPT type="text/javascript">
$("#closeBT").click(function(){
    tb_remove();
});

//click the save button to submit, close the current window and refresh the opener window
$("#search").click(function(){

    //get the transfer params
    var brands = new Array();
    $("input:checkbox").each(function(){
        if(this.checked) {
            brands.push($(this).val());
        }
    });
    
    $.ajax({
        type:"POST",
        url:"search.php",
        data:"brands="+brands.join(","),
        success:function(msg){
            tb_remove();    //close the thickbox
            var win = top.window; 
            try{ 
                if(win){ 
                   win.location.reload();
                }
            }catch(ex){} 
        }
    });

});
</SCRIPT>

方案5 
 不使用thickbox和jQuery,  使用http://code.kolmio.com/jsdialog/