【vue3】iframe的使用，实现跨域交互，互访内容和方法

一、查询参数 (Query Params): 通过url传参

<iframeid="iframe":src="iframeUrl"frameborder="0"width="100%"height="100%"></iframe>

const type='this is parent'const iframeUrl =ref('https://test.com?type='+type)

二、自定义事件:核心的两个方法是 传值：postMessage() 和 接收值：addEventListener()。

父页面引用子页面iframe

<iframeid="iframe"@load="passDataToIframe":src="iframeUrl"frameborder="0"width="100%"height="100%"></iframe>

//向子页面iframe传参constpassDataToIframe=(event:any)=>{nextTick(()=>{const iframeWindow = event.target.contentWindow;
            iframeWindow.postMessage({message:'this is from parent'},'*');})};//接收来自子页面iframe的参数constgetMsg=(event:any)=>{
        console.log(event)}onMounted(()=>{//addEventListener(事件名称，执行函数，触发类型) 用于向指定元素添加监听事件，配合removeEventListener() 方法来移除事件。
        window.addEventListener('message',getMsg);})onUnmounted(()=>{
        window.removeEventListener('message',getMsg);})

子页面iframe向父页面传参，子页面iframe接受父页面的参数

//子页面iframe发送参数给父页面
    window.parent.postMessage("子页面的参数","*");//子页面iframe接受父页面的参数constgetMsg=(event:any)=>{
        console.log(event)}onMounted(()=>{
        window.addEventListener('message',getMsg);})onUnmounted(()=>{
        window.removeEventListener('message',getMsg);})