Iframe的allow属性生效时机

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

问题

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

Iframe的allow属性生效时机相关推荐

android chrome iframe设置src属性无法启动app
0x01 Android Intents with Chrome Android有一个很少人知道的特性可以通过web页面发送intent来启动apps.以前通过网页启动app是通过设置iframe的s ...
用javascript 动态改变iframe 的src 属性
原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...
Android让Diglog中的元素fill_parent属性生效
lodingDialog = new Dialog(this,R.style.dialog_noBorder);lodingDialog.setContentView(R.layout.file_ex ...
frame或者iframe的contentwindow属性
contentwindow属性是指指定的frame或者iframe所在的window对象: <script> function fnnavigate() { for(i=0;i<do ...
php改变iframe的src,js动态改变iframe的src属性
今天在Chrome下显示如下的iframe,src设置为空,但打开页面时iframe一直处于刷新状态,看了下面的博文,觉得是不是默认不显示时src应该写成about:blank,明天回去测试下,回来更 ...
html5 iframe 属性,html中关于iframe的allowTransparency属性的详解
IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2 ...
js动态改变iframe的src属性
今天在Chrome下显示如下的iframe,src设置为空,但打开页面时iframe一直处于刷新状态,看了下面的博文,觉得是不是默认不显示时src应该写成about:blank,明天回去测试下,回来更 ...
input 标签 autofill属性生效导致的输入框背景色变成黄色（或其他色）的解决办法
vue + elementui 登录页输入框autofill属性导致的背景色变色问题(使用原生input也会有) 方法一: 用box-shadow效果遮住:box-shadow:0 0 0px 10 ...
【Jquery】------- iframe标签获取属性src中的标签(元素)input值实例代码
一,如下iframe标签代码: <iframe id="iframe" src="/pub/job/cron_editor/CronEditor.html" ...
js HTML ＜iframe＞ srcdoc 属性
HTML srcdoc 属性 <iframe srcdoc="<html><body></body></html>" src= ...

Iframe的allow属性生效时机

问题

原因

解决方法

1. 构建时设置allow属性

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

Iframe的allow属性生效时机相关推荐

最新文章

热门文章