javascript setAttribute iframe allowfullscreen在Chrome

时间:2018-06-15 12:35:58

标签: javascript google-chrome dom iframe leaflet

我在iframe中有一张地图(Chrome 67.0.3396.87)。 E.g。

<iframe height="480px" 
src="http://brunob.github.io/leaflet.fullscreen/" 
width="450px">
</iframe>

我们使用的CMS从iframe中删除了allowfullscreen属性,因此我尝试使用Javascript注入它们。

document.getElementsByTagName("iframe")[0].getAttribute("src") == "http://brunob.github.io/leaflet.fullscreen/" ? document.getElementsByTagName("iframe")[0].setAttribute("allowFullScreen", ""):null;

这会更改DOM,但全屏按钮不起作用。但是,如果您从iframe和allowfullscreen设置开始,那么它确实有效。

<iframe height="480px" 
src="http://brunob.github.io/leaflet.fullscreen/" 
width="450px" allowfullscreen>
</iframe>

如何让DOM中的更改进行注册,它应该是自动的?!

  • 更新:这适用于IE 11
  • 更新:这适用于Firefox 60.0.1

1 个答案:

答案 0 :(得分:0)

这是Chrome的功能not present in other browsers,您必须在allowfullscreen按钮启动之前更新iframe内容。您可以先使用iframe加载HTML来解决此问题。 ,然后运行脚本:

<iframe height="480px" 
src="http://brunob.github.io/leaflet.fullscreen/" 
width="450px">
</iframe>

<script>
// add allowfullscreen attribute to the iframe
document.getElementsByTagName("iframe")[0].getAttribute("src") == "https://interact.bcs.org/tracer/1/BCS_point_map.html" ? document.getElementsByTagName("iframe")[0].setAttribute("allowFullScreen", true):null;

// refresh the iframe container
document.getElementsByTagName("iframe")[0].src = document.getElementsByTagName("iframe")[0].src
</script>