主页面和iframe页面之间通讯案例
场景:在主页面点击选择按钮弹出一个layer的iframe弹层,然后在iframe层里面处理生成链接的业务,最后点击选择按钮,把最终的链接赋值给父页面的距离选择按钮最近的下一个input框里面。
主页面代码:
<div class="layui-form-item">
<label class="layui-form-label">链接</label>
<div class="layui-input-block">
<button class="layui-btn layui-btn-sm select_link" onclick="open_select_link($(this))">选择</button>
<input type="text" name="link" value="{$info['link']|default=''}" class="layui-input">
</div>
</div>
<script>
var button_obj;
function open_select_link(obj) {
button_obj = obj;
layer.open({
type: 2,
title: "选择跳转链接",
maxmin: true,
content: "{:url('select_link')}",
area: ["900px", "600px"],
success: function (layero, index) {
}
});
}
function assign_link(link, button_obj) {
console.log("assign_link 执行了!");
var inputElement = button_obj.next('input[name="link"]');
// 确保找到了 input 元素
if (inputElement.length > 0) {
inputElement.val(link);
} else {
console.error("没有找到对应的 input 元素");
}
}
// 监听来自子页面的消息
window.addEventListener("message", function (event) {
console.log("window.addEventListener", event.data);
// 调用 assign_link 函数并传递 link 和 button_obj
assign_link(event.data.link, button_obj);
}, false);
</script>
iframe页面的代码:
// 监听提交1
form.on('submit(sub)', function (data) {
var link = $("[name=link]").val();
//window.parent.assign_link(link);
window.parent.postMessage({ link: link }, "*");
window.parent.layer.closeAll();
return false;
});
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:主页面和iframe页面之间通讯案例 - https://wlphp.com/?post=446