[Vue] Use iframe to embed the page

• In Vue+ ElementUI+ iframeachieve be embedded in another HTML page in the current page:

<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"Indicates that the scroll bar is not displayed
2. style="position:absolute;top:80px;left: 120px;" Indicates that the position of the embedded iframe is 80px from the top of the browser and 120px from the left side of the browser, which is exactly the width of my sidebar and top navigation bar
3. mounted()The method in is called after the template is rendered into html, usually after the initialization page is completed, and then some required operations are performed on the dom node of html. Including adjusting the height and width of the page
4. changeMobsfIframeIt is a method of adaptive width and height, which onresize ()is called when the first page is loaded and the browser is resized ( ).