使用 iframe 中的一些问题
由于业务需要, 经常要在网页中插入 iframe, 记录一下自己遇到的问题
# 让动态的 iframe 内容高度自适应 (opens new window)
这里只贴最终解决方法, 具体过程可以点击上面链接查看
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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# iframe 标签 父子页面传值 (opens new window)
网上关于父子页面传值的方法很多, 为什么推荐这个呢? 因为当时需要动态改变 iframe 的 src 值, 每次都需要先将 src 清空, 再等页面渲染好后再给 src 赋值, 很麻烦, 但如果你在 src 后面加一个时间戳, 就不用每次先清空再赋值了, 而且也可以传递参数, 一举两得
1. 子页面取父页面的值
采用 url 传值的方式 ？+ &
<iframe src="child.html?a=1&b=2&c=3"></iframe>
1
这样, 在子页面的 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 ''
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
这样就可以轻松取出所有的参数值
var a = Request('a')
var b = Request('b')
var c = Request('c')
1
2
3
2
3
2. 子页面调用父页面的方法
子页面调用父页面方法, parent. 方法名()即可.
var word = parent.say()
1
3. 子页面向父页面传参
可以理解为在父页面定义了一个变量, 子页面调用该变量并且给它赋值.
window.parent.id = '123'
1
4. 父页面调用子页面方法
<iframe name="myframe" src="child.html"></iframe>
1
调用方法:
myframe.window.functionName()
1
# 使用 video.js 时, iframe 内嵌视频无法全屏的问题 (opens new window)
为 iframe 添加 allowfullscreen 属性即可, 如下所示
<iframe
src="video.html"
frameborder="0"
width="100%"
height="100%"
scrolling="no"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
></iframe>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
编辑 (opens new window)
上次更新: 5/27/2023, 1:02:05 PM