首页 > WordPress > 关于wBox iFrame回调关闭问题的解决方案

关于wBox iFrame回调关闭问题的解决方案

三水清 2010-09-06 21:05:39

最近很多使用我的jQuery弹出框插件wBox的人问我，关于wBox的关闭问题，例如一个页面中使用wBox iframe进来一个页面，而这个页面是进行用户登录，登录成功就关闭wBox，其实实现回调关闭wBox的方法很简单，就是使用iframe的DOM操作即可，例如我们的代码这样写：

//wbox赋值出来，然后使用wbox对象的close的方法关闭
var wbox=$("#iframe").wBox({
   	requestType: "iframe",
	target:"b.html"
   });

那么我们在页面b.html中进行了用户登录验证，我们验证成功，要关闭wBox，就可以在b.html中使用parent.wbox.close()来进行关闭，就像下面的代码，只要我们验证完毕运行closewBox就可以关闭了iframe：

function closewBox(){
    parent.wbox.close()
}

关于iframe子页面与父页面之间的DOM操作可以参考下面的文章：《使用JavaScript在IE和Firefox下进行iframe的DOM操作》

声明：文章未声明为原创文章，本文链接 http://js8.in/620.html. 转载请注明转自 JS8.IN ™

相关文章

"关于wBox iFrame回调关闭问题的解决方案"已有34条评论
    captain：

    将方法：function closewBox(){
    parent.wbox.close()
    }试了一下，结果是报 parent.wbox为空，取不到wbox这个对象

    2010年09月07日 01:44 回复 引用

    断桥残雪：

    @captain
    先赋值啊

    2010年09月07日 01:55 回复 引用

    captain：

    var wbox=$(”#iframe”).wBox({
    requestType: “iframe”,
    target:”b.html”
    });

    以上是在Home.aspx上的代码。
    ——
    在b.html页面上：

    function closewBox(){
    parent.wbox.close(); //对象或方法不存在
    }

    然后b.html里的OK调用。

    是哪里需要赋值呢？ close()方法是作用在jquery对象上还是DOM对象上的？
    我用下面的方法试过，但是不行：

    function closewBox(){
    var wbox=parent.document.getElementById(”wBox”);
    wbox.close(); //对象不存在该方法
    }

    （ 嘿嘿~~，javascript的基础不太好，直接用的是jquery，所以我可能有些细节上没理解清楚，希望断兄多多指教。）

    2010年09月07日 04:29 回复 引用

    captain：

    @断桥残雪
    在等你回复^_^

    2010年09月07日 18:22 回复 引用

    断桥残雪：

    参考http://www.js8.in/wbox里面的实例”本地iframe 自适用高度”,我改了一下可以点击button关闭了，照着写就可以了

    2010年09月07日 18:38 回复 引用

    captain：

    @断桥残雪
    大谢，昨天的代码今天重新运行竟然实现了，也不清楚怎么回事，真是麻烦你了

    2010年09月07日 18:49 回复 引用

    果子的小草：

    你好,我想问下使用wbox.close()方法为什么老是报对象为空的问题,还有使用弹出隐藏层后.里面的文本框老是取不到值

    2010年11月22日 19:52 回复 引用

    果子的小草：

    但是我不是运用在IFRAME里的.就是一个普通的页面弹一个层出来,这个层本来是隐藏的,层里面包含了button还有一个事件是wbox.close(),一点这个BUTTON就报对象为空,这个是何原因?

    2010年11月22日 20:11 回复 引用

    果子的小草：

    @断桥残雪
    可是我没有用iframe 进入一个页面，就是很简单的页面弹出一个隐藏层,这个层里有一个button,我想点击这个BUTTON关闭这个弹出层,但是用用了click=’wbox.close()’ 老是说对象为空

    2010年11月22日 20:15 回复 引用

    断桥残雪：

    前面赋值了吗？就是var wbox=$().wBox();？

    2010年11月22日 21:15 回复 引用

    果子的小草：

    @断桥残雪
    试了下,好象不行,点了没反映 ,方法如下
    $(”[name='close']“).click(function() {
    wbox = $().wBox();
    wbox.close();
    });

    2010年11月22日 21:23 回复 引用

    果子的小草：

    顺便还想问下,为什么在弹出层中的元素提交的时候值都是空的,同样也不是用iframe进入页面,比如我放了个text 文本框在隐藏层中,然后点击页面输入信息再提交,可是后台传过来的表单对象这个text文本框的值老是空的

    2010年11月22日 22:43 回复 引用

    断桥残雪：

    弹出层中是clone一个隐藏的层，所以实际中选择的是隐藏层的内容，所以你写选择器的时候要以下面的格式写：$(”#wBox”).find(”#sth”).val()

    2010年11月22日 23:09 回复 引用

    断桥残雪：

    你没有理解我的意思，我指的是你把wBox赋值为wbox，这样就可以关闭了！例如：
    你建立wbox的时候使用var wbox=$(’#wbox’).wBox({title:’test’,html:’测试内容’});
    如果想关闭就使用wbox.close();，因为wbox你之前赋值了，就不会出现对象为空了

    2010年11月22日 23:12 回复 引用

    果子的小草：

    谢谢点拨!我明白了原理了! :)

    2010年11月22日 23:37 回复 引用

    果子的小草：

    请问可以调整弹出窗口的位置么?

    2010年12月03日 00:40 回复 引用

    断桥残雪：

    不可以

    2010年12月03日 02:01 回复 引用

    果子的小草：

    求教:
    主页 var wbox;
    $(”[id='doVisit']“).click(function() {
    wbox = $(”[id='doVisit']“).wBox({ opacity: 0.8,title:” ,requestType: “iframe”, iframeWH: { width: 800, height: 400 }, target: /home/test/});
    })
    iframe 页面:
    $(”[name='closeDiv']“).click(function() {

    parent.wbox.close()

    return false;
    });

    老是报parent.wbox 为空,请问这个是什么问题.

    2010年12月13日 00:43 回复 引用

    断桥残雪：

    主页使用下面的代码试试
    var wbox=$(”#doVisit”).wBox(……);

    2010年12月13日 00:44 回复 引用

    果子的小草：

    好象没有用啊..

    2010年12月13日 00:55 回复 引用

    断桥残雪：

    wbox在你的定义中不是全局变量，所以你应该改成全局变量就可以了，不行就是用window.wbox

    2010年12月13日 00:56 回复 引用

    果子的小草：

    用window.wbox也不行,我定义的是全局变量.如下 $(document).ready(function() {
    var wbox;

    $(”[id='doVisit']“).click(function() {
    …..
    …..
    })

    })

    2010年12月13日 01:06 回复 引用

    断桥残雪：

    ⊙﹏⊙b汗，你应该好好看看JS的变量应用的空间了

    2010年12月13日 01:07 回复 引用

    果子的小草：

    求指教.我现在的问题应该怎么改呢

    2010年12月13日 01:09 回复 引用

    断桥残雪：

    没有页面只是这么说，真不好说

    2010年12月13日 01:10 回复 引用

    果子的小草：

    那我把页面代码贴出来:

    登录首页

    var wbox;
    $(document).ready(function() {

    var visitname = ‘123′;
    $(’#doVisit’).click(function() {
    var targeturl = ”;
    targeturl = ‘/Home/NameVisit?visitname=’ + visitname;

    var wbox=$(’#doVisit’).wBox({ opacity: 0.8,title:” ,requestType: “iframe”, iframeWH: { width: 800, height: 400 }, target: targeturl });
    })

    })

    2010年12月13日 01:17 回复 引用

    果子的小草：

    登录首页

    var wbox;
    $(document).ready(function() {

    var visitname = ‘123′;
    $(’#doVisit’).click(function() {
    var targeturl = ”;
    targeturl = ‘/Home/NameVisit?visitname=’ + visitname;

    var wbox=$(’#doVisit’).wBox({ opacity: 0.8,title:” ,requestType: “iframe”, iframeWH: { width: 800, height: 400 }, target: targeturl });
    })

    })

    2010年12月13日 01:18 回复 引用

    果子的小草：

    ASP标签贴不出来…

    2010年12月13日 01:18 回复 引用

    果子的小草：

    我能发你的邮箱直接问吗

    2010年12月13日 01:18 回复 引用

    小小青：

    有个问题.当在A页面加入
    var wBox=$(”#new_box”).wBox({
    requestType: “iframe”,
    target:”123.htm”
    });
    B页面加入
    parent.wBox.close();
    是可以关闭的
    但是要是在A页面加入
    function divShow(urll) {
    var wBox=$(”#new_box”).wBox({
    requestType: “iframe”,
    target:url
    });
    wBox.showBox();
    }
    B页面加入
    parent.wBox.close();

    此时就会无法关闭.请问有解决办法吗?

    2011年01月04日 23:16 回复 引用

    konye：

    请问下，我要是在b页面中有returnVal的返回值的话，在a页面中怎么获取到？

    2011年07月22日 08:37 回复 引用

    jackyrong：

    HI,我下载了你的WBOX例子，使用的是调用本地iframe的功能，但发现如下问题，不知道是否BUG?
    我用的不是jquery 1.4,是1.7.1，然后在代码中，用了
    $(document).ready(function() {

    var wbox1=$(”#isFrame2″).wBox({
    requestType: “iframe”,
    target:”500×400.html”
    });
    ｝
    然后在子窗口中，用parent.wbox.close关闭的话，会出现
    has no method ‘close’的提示（chrome,firefox，但会关闭，IE下没问题，为什么呢？

    2012年04月28日 19:06 回复 引用

    jackyrong：

    假如打开的子窗口中，又使用了jquery，比如jquery搭配其他加载了树（有document.ready事件中），那么再parent.wbox.close(),就会说找不到CLOSE方法了，因为wbox没了，请问这个情况下要如何搞呢？

    2012年04月28日 20:12 回复 引用

    jackyrong：

    已经解决了，谢谢，方法是：
    在父页面中，声明全局变量
    window.wbox=$(”#isFrame”).wBox({
    。。。。
    }
    子窗口中：
    parent.window.wbox.close();

    2012年04月28日 20:47 回复 引用

文明发言，你好我也好
正在提交,请稍后...
♦▐返回顶部