lhajh

记录自己使用 iframe 中的一些问题

2018/10/14

由于业务需要, 经常要在网页中插入 iframe, 记录一下自己遇到的问题

让动态的 iframe 内容高度自适应

这里只贴最终解决方法, 具体过程可以点击上面链接查看

setTimeout 版:

var iframes = document.getElementsByTagName('iframe')

for (var i = 0, j = iframes.length; i < j; ++i) {
  // 放在闭包中，防止 iframe 触发 load 事件的时候下标不匹配
  ;(function(_i) {
    iframes[_i].onload = function() {
      this.style.visibility = 'hidden'
      // this.style.display = 'none';

      // 提前还原高度
      this.setAttribute('height', 'auto') // 或设为''

      // 再在下一轮事件循环中设置新高度
      setTimeout(function() {
        iframes[_i].setAttribute('height', iframes[_i].contentWindow.document.body.scrollHeight)

        iframes[_i].style.visibility = 'visible'
        // iframes[_i].style.display = 'block';
      }, 0)
    }
  })(i)
}

onbeforeunload 版

var iframes = document.getElementsByTagName('iframe')

for (var i = 0, j = iframes.length; i < j; ++i) {
  // 放在闭包中，防止 iframe 触发 load 事件的时候下标不匹配
  ;(function(_i) {
    iframes[_i].onload = function() {
      this.contentWindow.onbeforeunload = function() {
        iframes[_i].style.visibility = 'hidden'
        // iframes[_i].style.display = 'none';

        iframes[_i].setAttribute('height', 'auto')
      }

      this.setAttribute('height', this.contentWindow.document.body.scrollHeight)

      this.style.visibility = 'visible'
      // this.style.display = 'block';
    }
  })(i)
}

iframe 标签 父子页面传值

网上关于父子页面传值的方法很多, 为什么推荐这个呢? 因为当时需要动态改变 iframe 的 src 值, 每次都需要先将 src 清空, 再等页面渲染好后再给 src 赋值, 很麻烦, 但如果你在 src 后面加一个时间戳, 就不用每次先清空再赋值了, 而且也可以传递参数, 一举两得

1. 子页面取父页面的值

采用 url 传值的方式 ？+ &

<iframe src="child.html?a=1&b=2&c=3"></iframe>

这样，在子页面的 js 中便可以取值，将取值方法封装为一个 function

function Request(argname) {
  var url = document.location.href
  var arrStr = url.substring(url.indexOf('?') + 1).split('&')
  //return arrStr;
  for (var i = 0; i < arrStr.length; i++) {
    var loc = arrStr[i].indexOf(argname + '=')
    if (loc != -1) {
      return arrStr[i].replace(argname + '=', '').replace('?', '')
      break
    }
  }
  return ''
}

这样就可以轻松取出所有的参数值

var a = Request('a')
var b = Request('b')
var c = Request('c')

2. 子页面调用父页面的方法

子页面调用父页面方法，parent.方法名（）即可。

var word = parent.say()

3. 子页面向父页面传参

可以理解为在父页面定义了一个变量，子页面调用该变量并且给它赋值。

window.parent.id = '123'

4. 父页面调用子页面方法

<iframe name="myframe" src="child.html"></iframe>

调用方法：

myframe.window.functionName()

使用 video.js 时, iframe 内嵌视频无法全屏的问题

为 iframe 添加 allowfullscreen 属性即可, 如下所示

<iframe
  src="video.html"
  frameborder="0"
  width="100%"
  height="100%"
  scrolling="no"
  allowfullscreen="true"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
></iframe>

Search

    Post Directory