使用外部html从iFrame关闭jquery对话框

时间:2014-05-22 09:31:43

标签: javascript jquery html jquery-ui iframe

我正在尝试从iframe中关闭一个带有外部html的jQuery ui对话框。

我的代码如下所示:

我的主html中的JS代码,当我点击按钮时创建对话框:

function createDialog() {
        return $("<div id='personal-popup' class='dialog' title='Copia de archivos'></div>")
        .html('<iframe style="border: 0px; " src="copy.html" width="100%" height="100%"></iframe>')
        .dialog({
            resizable: true,
            height: 447.59999990463257,
            width: 993.5999999046326,
            modal: true
        });
    }

其他html(copy.html)中的JS代码

function copiarArchivos() {


$.mobile.loading('show',{
  text: "Copiando",
  textVisible: true,
  theme: "a",
  html: ""
});

var result = [];

var allOptions = $("#select-custom-19");

$("#select-custom-19 option:selected").each(function () {

var $this = $(this);
var selText = $this.text();
$this.prop("selected", false);
result.push(selText);
});

allOptions.selectmenu('refresh', true);

$.ajax ({
  url: "php/copia.php",
  type: "post",
  data: {"params": result},
  success: function(response) {
        $.mobile.loading('hide');
        //I want to close the dialog here when the ajax function success
        $(window.parent.document).find("#personal-popup").dialog('close');
    }

}); 
}

我已按照这个问题的答案:Close jQuery UI Dialog from Iframe,但它对我不起作用。

---编辑---

将从iFrame调用的JS函数,在mane html(index.html)中分配

function closeDialog(){
    console.log("Im working!!");
    document.getElementById("personal-popup").dialog("close");
    }

来自iframe的JS调用(copy.html)

$.ajax ({
  url: "php/copia.php",
  type: "post",
  data: {"params": result},
  success: function(response) {
        $.mobile.loading('hide');
        window.parent.closeDialog();
    }

}); 

1 个答案:

答案 0 :(得分:0)

从iframe内部

可以访问window.parent

这意味着您可以在主框架中使用:

window.closeDialog = function(){//Do stuff}

Anf然后在你的iframe中有:

window.parent.closeDialog();