我在 iframe 中有一张 map (Chrome 67.0.3396.87)。例如
<iframe height="480px"
src="http://brunob.github.io/leaflet.fullscreen/"
width="450px">
</iframe>
我们使用的 CMS 从 iframe 中删除了 allowfullscreen
属性,因此我尝试使用 Javascript 将它们重新注入(inject)。
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
最佳答案
这是 Chrome 的一项功能,not present in other browsers ,您必须在启用全屏按钮之前更新 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>
关于javascript setAttribute iframe allowfullscreen 在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50875766/