Nested page - and across the highly adaptive operation DOM

<div id="myIframeId">　　
    <iframe
      ref="myIframe"
      name="odpIframeName"
      :src="iframeUrl"
      frameborder="0"
      align="middle"
      width="100%"
      height="100%"
    />
</div>

background:

frame nested page: height default is small, and if not in the same domain, you can not access the internal DOM element

1. If a fixed height, part of screen portion needs, as used herein, dynamic access to a browser screen height Sets: 100px height where the top bar is removed, the adaptive screen

autoheight () {
    let winHeight = 0
    if (window.innerHeight) { winHeight = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) {
    winHeight = document.body.clientHeight }
    if (document.documentElement && document.documentElement.clientHeight) { winHeight =
    document.documentElement.clientHeight }
    document.getElementById('myIframeId').style.height = winHeight - 100 + 'px'
}

  mounted () {
    this.autoheight()
    window.onresize = () => {
      return (() => {
        this.autoheight()
      })()
    }
  }

2. how DOm inside the iframe:

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>

var iframe = document.getElementById ( "iframe1" );
 var IWindow = iframe.contentWindow;
 var the IDoc = iwindow.document; 
the console.log ( "window", IWindow); // Get iframe window object 
console.log ( "document ", the IDoc); // Get the iframe Document 
the console.log (" HTML ", idoc.documentElement); // Get the iframe HTML 
the console.log (" head ", idoc.head); // Get head 
the console.log ( "body", idoc.body); // get body

An easier way: Get by name

console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);

Dom is also available parent element

window.parent get the window object level, if it is the iframe or iframe window object 
window.top get the most top-level container window object, that is, is that you open the document page 
window.self returns a reference to its own window. It will be appreciated window === window.self (brain damage)

Recommended Reference: http://caibaojian.com/js-get-iframe.html

<template>
  <iframe :src="urlPath" class="iframe" ref="iframe"></iframe>
</template>

<script>
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
export default {
  name: 'nxframe',
  data() {
    return {
      urlPath: this.getUrlPath() // iframe src 路径
    }
  },
  created() {
    NProgress.configure({ showSpinner: false })
  },
  mounted() {
    this.load ()
     the this .resize () 
  }, 
  Watch: { 
    $ route: function () {
       the this .load () 
    }, 
    routerPath: function (Val) {
       // listening routerPath variations, changes src path 
      the this .urlPath = the this . getUrlPath () 
    } 
  }, 
  Methods: { 
    // display wait block 
    Show () { 
      NProgress.start () 
    }, 
    // hide waits Great 
    hide () { 
      NProgress.done () 
    }, 
    // load variation adaptive browser window 
    a resize () { 
      window.onresize= () => {
         The this .iframeInit () 
      } 
    }, 
    // loading assembly 
    Load () {
       the this the .Show ()
       var In Flag = to true  // the URL contains a question mark 
      IF ( the this . $ Route.query.src.indexOf ( '?') === -1 ) { 
        in Flag = to false 
      } 
      var List = []
       for ( var Key in  the this . route.query $) {
         IF (Key! == 'the src' Key &&! == 'name' ) { 
          list.push ( `$} {Key =the this . $ route.query [Key] `) 
        } 
      } 
      List = list.join ( '&' ) .toString ()
       IF (In Flag) {
         the this . route.query.src = $ {$` the this . $ route.query {} $ .src 
          List.length > 0 `& list`:? '' 
        }` 
      } the else {
         the this . route.query.src = $ {$ ` the this . route.query.src} $ {$ 
          List.length > 0 ? `list`:? '' 
        }` 
      } 
      // timeout 3s automatically hidden waiting mad, enhance the user experience 
      the let Time 3 = 
      const timeFunc = setInterval (() => {
        time--
        if (time === 0) {
          this.hide()
          clearInterval(timeFunc)
        }
      }, 1000)
      this.iframeInit()
    },
    // iframe窗口初始化
    iframeInit() {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - 200
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    },
    getUrlPath: function() {
      // 获取 iframe src 路径
      let url = window.location.href
      url = url.replace('/myiframe', '')
      return url
    }
  }
}
</script>

<style lang="scss">
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>