vue进阶 Iframe基础

您所在的位置：网站首页 › 获取iframe地址 › vue进阶 Iframe基础

vue进阶 Iframe基础

2024-03-16 11:31| 来源: 网络整理| 查看: 265

Iframe

获取iframe里面的内容

Iframe 注意事项

vue页面使用iframe

iframe 与 vue 直接的交互

vue 向 iframe 传值

iframe 向 vue 传值

Iframe

Iframe 在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。

获取iframe里面的内容

iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象

Iframe 注意事项

1 使用 iframe 后，window.location.href 将拿不到导航栏信息，也无法监听和计算属性

2 可以使用 parent.location.href 或者 document.referrer 拿到最外层导航栏信息，但是无法进行监听和计算属性

vue页面使用iframe

template 引入

iframe 路径建议写在 mounted 中，可以设置路径和参数

onMounted(() => { iframeSrc.value = `/sheet/send? full=true&id=${uuid}&instance_plan_id=${instance_plan_id}`; });

iframe 与 vue 直接的交互 vue 向 iframe 传值

vue 页面

const mapFrame = this.$refs['iframe']; const iframeWin = mapFrame.contentWindow; iframeWin.postMessage( { value: 'backSuccess', id: 'vue', success: true }, '*' );

iframe 接受 vue 的值建议写在 mounted 和 created 中

window.addEventListener('message',e=>{ console.log(e，'vue 传递过来的数据') })

iframe 向 vue 传值

iframe 页面

window.parent.postMessage(obj, '*'); //如果js外面还有一层js， window.parent.window.parent.postMessage(obj, '*');

vue 监听 iframe 传过来的值

mounted() { // 获取并监听iframe传递来的数据 let that = this; window.addEventListener('message', function (e) { var res = e.data; console.log(res, 'iframe传递过来的数据'); }) }

【本文地址】

vue进阶 Iframe基础

vue进阶 Iframe基础

今日新闻

推荐新闻