layer.js使用心得-向弹出框传值问题
2018-01-16 16:09
609 查看
问题背景:
实现弹出对话框加载页面,所以我选择了独立组件layer.js。基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数
注:'#sayHello'元素是在主窗口下的 HomeFram(HomeFrame是主窗口下的子 iframe) 里
代码如下:
[javascript] view
plain copy
$('#sayHello').click(function () {
top.layer.open({
id: "layer_say_hello",
type: 2,
title: '打招呼',
shadeClose: true,
shade: 0.8,
area: ['500px', '400px'],
content: '/Findfriend/Part_SayHello', //iframe的url
success: function (layero, index) {
//传入参数,并赋值给iframe的元素
}
});
})
问题描述:
在success回调函数中使用jquery选取不到弹出的 ifram 的元素
问题分析:
经过下午的头破血流
,终于被我给分析出来了,功夫不负有心人啊。废话少说,重点来了。
原因是:success回调函数的上下文并不是 主窗口的上下文, 而是 HomeFrame 的上下文。所以在success回调函数中是可以直接找到 HomeFrame 中的元素。如果要找到 LayerFrame 的元素,就必须先找到 LayerFrame 的Dom对象,然后方可找到 LayerFrame 的 document ,最后再去找 LayerFrame 的元素
正确代码如下:
[javascript] view
plain copy
$('#sayHello').click(function () {
top.layer.open({
id: "layer_say_hello",
type: 2,
title: '打招呼',
shadeClose: true,
shade: 0.8,
area: ['500px', '400px'],
content: '/Findfriend/Part_SayHello', //iframe的url
success: function (layero, index) {
var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
var her_nickname = $("#nickname").text(); //nickname 是 HomeFrame的元素
// layero.find("iframe") 找到iframe的jquery对象
// layero.find("iframe")[0] 将jqeruy对象转化为Dom对象
// contentWindow 获取当前 iframe 的 内容 window对象(Dom对象)
//.send-hello 是 LayerFrame 的元素
var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
}
});
})
实现弹出对话框加载页面,所以我选择了独立组件layer.js。基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数
注:'#sayHello'元素是在主窗口下的 HomeFram(HomeFrame是主窗口下的子 iframe) 里
代码如下:
[javascript] view
plain copy
$('#sayHello').click(function () {
top.layer.open({
id: "layer_say_hello",
type: 2,
title: '打招呼',
shadeClose: true,
shade: 0.8,
area: ['500px', '400px'],
content: '/Findfriend/Part_SayHello', //iframe的url
success: function (layero, index) {
//传入参数,并赋值给iframe的元素
}
});
})
问题描述:
在success回调函数中使用jquery选取不到弹出的 ifram 的元素
问题分析:
经过下午的头破血流
,终于被我给分析出来了,功夫不负有心人啊。废话少说,重点来了。
原因是:success回调函数的上下文并不是 主窗口的上下文, 而是 HomeFrame 的上下文。所以在success回调函数中是可以直接找到 HomeFrame 中的元素。如果要找到 LayerFrame 的元素,就必须先找到 LayerFrame 的Dom对象,然后方可找到 LayerFrame 的 document ,最后再去找 LayerFrame 的元素
正确代码如下:
[javascript] view
plain copy
$('#sayHello').click(function () {
top.layer.open({
id: "layer_say_hello",
type: 2,
title: '打招呼',
shadeClose: true,
shade: 0.8,
area: ['500px', '400px'],
content: '/Findfriend/Part_SayHello', //iframe的url
success: function (layero, index) {
var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
var her_nickname = $("#nickname").text(); //nickname 是 HomeFrame的元素
// layero.find("iframe") 找到iframe的jquery对象
// layero.find("iframe")[0] 将jqeruy对象转化为Dom对象
// contentWindow 获取当前 iframe 的 内容 window对象(Dom对象)
//.send-hello 是 LayerFrame 的元素
var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
}
});
})
相关文章推荐
- layer.js使用心得-向弹出框传值问题
- 关于layer.js 弹出框表单提交关闭父窗口出现表单提交失效的问题
- 解决AJAX中使用UpdatePanel后无法弹出js对话框问题(引)
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- 使用Layer弹出iframe表单窗口,有几率无法成功提交表单问题解决
- 在Vue中使用layer.js弹出层插件
- 使用JS制作弹出框的几个小问题
- 使用JS制作弹出框的几个小问题
- 关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放问题
- 使用JS制作弹出框的几个小问题
- 关于layer.js中layer.confirm弹出框看不到或者不居中问题处理
- jQuery使用Layer弹出层插件闪退问题
- 关于layer.js中layer.confirm弹出框看不到或者不居中问题处理
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- YII框架中使用layer弹出层,注册js文件
- (转)解决AJAX中使用UpdatePanel后再用Response.Write();等无法弹出对话框问题 3法
- 解决AJAX中使用UpdatePanel后再用Response.Write();等无法弹出对话框问题 3法
- 在Updatepanel中使用JS的问题.
- 解决AJAX中使用UpdatePanel后再用Response.Write();等无法弹出对话框问题
- 解决AJAX中使用UpdatePanel后再用无法弹出对话框问题