vue页面内嵌iframe

vue代码

<template>
  <div>
    <iframe
      id="tpd"
      src="https://Jenkins.com/"
      frameborder="0"
      width="100%"
      height="100%"
      style="position:absolute;"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    /**
      * iframe-宽高自适应显示
      */
    function changeMobsfIframe() {
      const tpd = document.getElementById('tpd')
      const deviceWidth = document.body.clientWidth
      const deviceHeight = document.body.clientHeight
      tpd.style.width = (Number(deviceWidth) - 100) + 'px' // 数字是页面布局宽度差值
      tpd.style.height = (Number(deviceHeight) - 100) + 'px' // 数字是页面布局高度差
    }
    changeMobsfIframe()
    window.onresize = function() {
      changeMobsfIframe()
    }
  }
}
</script>

<style>
</style>

jenkins需要设置一下

jenkins：XFrame Filter Plugin 
进入http://10.60.102.67:8080/configure
安装后设置：ALLOWALL

之后就可以了，要不然iframe区域会显示人家把你拒绝了，很心酸。