嵌套layui iframe弹窗的子页面调用父页面里的函数方法(调用方法及关闭页面)

1、layui iframe弹窗调用父级页面layui.ues中的方法名:

具体例子(成功)

先定义要调用方法名称:
homeworklist 和parent.tools.homeworklist()
父页面方法名:
在这里插入图片描述
子页面调用
在这里插入图片描述

2、不在layui.use中,调用方法名

父页面的方法名:
function func1(){
	alert('不在layui.use中的调用方法');
}
子页面调用:
parent.func1();

参考知识点(关于layui iframe弹窗的调用)

1、 iframe如何调用父页面layui.use中的方法

在这里插入图片描述

layui.use(... function(){
  var _tools = {
    func1: function(){
      console.log('func1');
    }
  }
  window.tools = _tools;
})


// 外部调用,如子页面
parent.tools.func1();

2、不在layui.use中

在这里插入图片描述

layer iframe 之间传值和关闭iframe弹窗
1、访问父页面元素值

var parentId=parent.$("#id").val();//访问父页面元素值  

2、访问父页面方法

var parentMethodValue=parent.getMethodValue();//访问父页面方法  

3、如何关闭弹出的子页面窗口

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  

parent.layer.close(index);//关闭弹出的子页面窗口  

4、如何从子页面执行刷新父页面操作

parent.location.reload(); // 父页面刷新  

3、layui 父页面传递数据给iframe子页面(没有试过)

table.on("tool(demoTable)",function (obj) {
    var data = obj.data;
    if (obj.event=="edit"){
        layer.open({
            type: 2,
            area: ['380px', '400px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade:0.4,
            title: '编辑',
            content: './byjhEdit.html?id='+data.id,
            success:function (layero,index) {
                //获取当前打开的子页面id   
                var frameId = $(layero).find('iframe').attr("id");
                //找到子页面的document对象
                var document = window.frames[frameId].document;
                //根据id找到子页面中相应的元素并赋值
                $(document).find("#name").val(data.name);
                $(document).find("#id").val(data.sid);
             }
         });
     }
 });
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
除了使用 iframe,还有一种方法是使用 Vue 的异步组件来嵌套外部页面。这种方法可以通过动态加载外部页面的内容并将其作为组件渲染到 Vue 应用中。 下面是一个示例: 首先,创建一个名为 ExternalPage.vue 的组件文件,用于渲染外部页面的内容。例如: ```html <template> <div> <div v-if="loading">Loading...</div> <div v-else v-html="content"></div> </div> </template> <script> export default { data() { return { loading: true, content: '' } }, mounted() { this.loadExternalPage() }, methods: { loadExternalPage() { // 发起异步请求获取外部页面的内容 // 你可以使用 axios 或其他方式来获取内容 // 这仅作示例,直接使用了一个简单的 fetch 请求 fetch('https://example.com/external-page') .then(response => response.text()) .then(data => { this.loading = false this.content = data }) .catch(error => { console.error(error) this.loading = false this.content = 'Failed to load external page.' }) } } } </script> ``` 在上面的代码中,我们使用了一个 loading 变量来表示是否正在加载外部页面的内容,并使用 content 变量来存储外部页面的内容。在组件的 mounted 钩函数中,我们调用了 loadExternalPage 方法来异步加载外部页面的内容。 接下来,在你的路由配置中,将该组件与相应的路径关联起来。例如: ```javascript const routes = [ { path: '/external', name: 'ExternalPage', component: () => import('@/views/ExternalPage.vue') }, // 其他路由配置... ] ``` 在上面的代码中,我们使用了 Vue 的异步组件语法,通过 `() => import('@/views/ExternalPage.vue')` 来动态加载 ExternalPage.vue 组件。 最后,在你的模板中,可以通过 `<router-view>` 标签来显示路由对应的组件。例如: ```html <template> <div id="app"> <!-- 其他内容... --> <router-view></router-view> </div> </template> ``` 现在,当你访问 '/external' 路径时,Vue Router 将会渲染 ExternalPage 组件,并在组件中异步加载外部页面的内容。 希望这个方法对你有帮助。如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值