Iframe的allow属性生效时机

朝花夕拾

Iframe的allow属性生效时机

By ZTao-z 0

问题

在项目开发的过程中，打算通过下面的方法在收到实时消息的时候通过postMessage通知iframe内部的video元素进行播放。但是在实际尝试后发现，这样设置allow=“autoplay”属性后，仍然需要用户主动与iframe进行交互后才可以通过代码触发video的播放。

// 元素定义
const ifrm = document.createElement('iframe');
ifrm.src = 'xxx.html';

setTimeout(() => {
  ifrm.setAttribute('allow', 'autoplay');
}, 10);

// 实际使用
onRecvMessage(() => {
  ifrm.postMessage({ cmd: 'videoPlay' }, '*')
})

原因

有大佬对iframe的属性生效时机做了 测试。可以看到，通过代码动态修改allow属性并不会更新已加载内容的iframe内部当前的功能策略权限。而当iframe的内容被重新加载后，allow属性能够生效。综上所述，allow属性对应的功能策略（Feature Policy）的生效时机是在iframe元素渲染内容时（即DOM Build），而且无法在一个已经加载完成的iframe元素上动态修改。

解决方法

1. 构建时设置allow属性

const ifrm = document.createElement('iframe');
ifrm.setAttribute('allow', 'autoplay');
ifrm.src = 'xxx.html';

2. 更改allow属性后重新加载

const ifrm = document.getElementById('id_of_frame');
ifrm.setAttribute('allow', "autoplay");
ifrm.src = ifrm.src;