嵌套的页面——自适应高度与跨越操作DOM

Posted 2022-05-27 wheatcatcher

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

背景：

frame嵌套的页面：高度默认很小，而且如果不在相同域名，无法访问内部的DOM元素

1.如果设置固定的高度，部分屏幕部分满足需求,这里使用动态获取浏览器屏幕高度的方法设置：这里去除顶栏100px高度，自适应屏幕

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.如何操作iframe内部的DOm:

<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 idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body

更简单的方法：通过name获取

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

也可以获取父元素的Dom

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self(脑残)

推荐参考：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()
    this.resize()
  ,
  watch: 
    $route: function() 
      this.load()
    ,
    routerPath: function(val) 
      // 监听routerPath变化，改变src路径
      this.urlPath = this.getUrlPath()
    
  ,
  methods: 
    // 显示等待框
    show() 
      NProgress.start()
    ,
    // 隐藏等待狂
    hide() 
      NProgress.done()
    ,
    // 加载浏览器窗口变化自适应
    resize() 
      window.onresize = () => 
        this.iframeInit()
      
    ,
    // 加载组件
    load() 
      this.show()
      var flag = true // URL是否包含问号
      if (this.$route.query.src.indexOf(‘?‘) === -1) 
        flag = false
      
      var list = []
      for (var key in this.$route.query) 
        if (key !== ‘src‘ && key !== ‘name‘) 
          list.push(`$key= this.$route.query[key]`)
        
      
      list = list.join(‘&‘).toString()
      if (flag) 
        this.$route.query.src = `$this.$route.query.src$
          list.length > 0 ? `&list` : ‘‘
        `
       else 
        this.$route.query.src = `$this.$route.query.src$
          list.length > 0 ? `?list` : ‘‘
        `
      
      // 超时3s自动隐藏等待狂，加强用户体验
      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 = `$clientHeightpx`
      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>