Iframe的allow属性生效时机

大家好，欢迎来到IT知识分享网。

文章转载自 我自己的小破站，大佬们动动手指，进来瞧一瞧

问题

在项目开发的过程中，打算通过下面的方法在收到实时消息的时候通过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;