layui iframe传值
时间: 2023-07-06 17:33:17 浏览: 51
在 layui中,可以通过url传递参数来实现iframe与父页面之间的数据传递。
在父页面中,可以使用以下代码来打开iframe并传递参数:
```
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 2,
title: 'iframe传值示例',
shadeClose: true,
shade: 0.8,
area: ['800px', '600px'],
content: 'iframe.html?id=123',
end: function(){
// 关闭时触发的回调函数
}
});
});
```
在iframe页面中,可以使用以下代码来获取父页面传递的参数:
```
var id = getUrlParam('id');
console.log(id);
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.parent.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
```
其中,getUrlParam()函数是用来获取url参数的函数,可以在其他项目中复用。
相关问题
layui 给弹窗iframe传值
可以通过在父页面中定义一个函数,然后在子页面中调用该函数并传递参数来实现给弹窗iframe传值。
在父页面中定义函数:
```javascript
function setValue(value) {
// 处理传递过来的值
console.log(value);
}
```
在弹窗iframe中调用父页面函数并传递参数:
```javascript
parent.setValue('参数值');
```
在父页面中可以通过定义一个全局变量来存储传递过来的值,例如:
```javascript
var data = null;
function setValue(value) {
data = value;
}
```
这样在父页面中就可以通过访问 `data` 变量来获取传递过来的值了。
iframe传值vue
以下是两种iframe传值给Vue的方法:
1. 在Vue中给iframe传值
```html
<!-- Vue模板 -->
<template>
<div>
<button @click="fatherpost">给iframe传值</button>
<iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"></iframe>
</div>
</template>
<script>
export default {
mounted() {
// 挂载在mounted中
this.iframeWin = this.$refs.iframe.contentWindow;
},
methods: {
fatherpost(e) {
// 点击给iframe传值
this.iframeWin.postMessage("我是来自父页面的data", '*');
},
},
};
</script>
```
2. 在iframe中给Vue传值
```html
<!-- iframe模板 -->
<template>
<div>
<button @click="sonpost">向父亲传值</button>
</div>
</template>
<script>
export default {
methods: {
sonpost() {
window.parent.postMessage("我是子页面的test!", '*');
},
},
};
</script>
```
注意:在Vue项目中接收消息的代码应该写在Vue实例的生命周期函数中,例如mounted()或created()。