Fundamentos de Iframe avanzados de Vue

Tabla de contenido

marco flotante

Obtener el contenido dentro del iframe

Notas sobre marcos flotantes

La página de Vue usa iframe

Interacción directa entre iframe y vue

Vue pasa valor a iframe

valor de transferencia de iframe a vue

---

marco flotante

Iframe puede manipular libremente el contenido (DOM) del iframe y el marco principal cuando se encuentra en el mismo dominio, y puede realizar saltos de página cuando se trata de dominios cruzados.

Obtener el contenido dentro del iframe

iframe.contentWindow, obtenga el objeto de ventana de iframe
iframe.contentDocument, obtenga el objeto de documento de iframe

Notas sobre marcos flotantes

1 Después de usar iframe, window.location.href no obtendrá la información de la barra de navegación, ni podrá monitorear ni calcular atributos

2 Puede usar   parent.location.href  o   document.referrer para obtener la información de la barra de navegación más externa, pero no puede monitorear ni calcular atributos

La página de Vue usa iframe

importación de plantilla

  <Iframe :src="iframeSrc" width="100%"  height="100%"  ref="iframe" />

Se recomienda escribir la ruta del iframe en montado, y la ruta y los parámetros se pueden configurar

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

Interacción directa entre iframe y vue

Vue pasa valor a iframe

página de vista

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

iframe acepta el valor de vue, se recomienda escribir en montado y creado

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

valor de transferencia de iframe a vue

página de iframe

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

Vue escucha el valor pasado por iframe

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