[Vue] Usa iframe para insertar la página

• En Vue+ ElementUI+ iframelograr estar incrustado en otra página HTML en la página actual:

<template>
  <div>
    <iframe src="http://0.0.0.0:8080" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:80px;left: 120px;"></iframe>
  </div>
</template>
 
 
<script>
  export default {
     
     
    data () {
     
     
      return {
     
     
      }
    },
    mounted(){
     
     
      /**
      * iframe-宽高自适应显示   
      */
      function changeMobsfIframe(){
     
     
        const mobsf = document.getElementById('mobsf');
        const deviceWidth = document.body.clientWidth;
        const deviceHeight = document.body.clientHeight;
        mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
        mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
      }
 
      changeMobsfIframe()
 
      window.onresize = function(){
     
     
        changeMobsfIframe()
      }
    },     
  }
</script>

1. scrolling="no"Indica que la barra de desplazamiento no se muestra
2. style="position:absolute;top:80px;left: 120px;" Indica que la posición del iframe incrustado es 80px desde la parte superior del navegador y 120px desde el lado izquierdo del navegador, que es exactamente el ancho de mi barra lateral y la barra de navegación superior
3. mounted()El método en se llama después de que la plantilla se renderiza en html, generalmente después de que se completa la página de inicialización, y luego se realizan algunas operaciones requeridas en el nodo dom de html. Incluyendo ajustar la altura y el ancho de la página
4. changeMobsfIframeEs un método de ancho y alto adaptativos, que onresize ()se llama cuando se carga la primera página y se cambia el tamaño del navegador ( ).