如何在网页中嵌入一个自适应大小的 iframe
<script>
function openFullscreenIframe() {
// 创建iframe元素
var iframe = document.createElement('iframe');
// 设置iframe的src属性为http://qq.com
iframe.src = 'https://www.host99.cn/';
// 设置iframe的样式为当前窗口大小
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = window.innerWidth + 'px';
iframe.style.height = window.innerHeight + 'px';
iframe.style.border = 'none';
// 添加iframe到当前页面的body元素中
document.body.appendChild(iframe);
// 监听窗口大小变化事件
window.addEventListener('resize', resizeIframe);
// 自适应手机尺寸
function resizeIframe() {
iframe.style.width = window.innerWidth + 'px';
iframe.style.height = window.innerHeight + 'px';
}
}
</script>
<p>这样的话,只会弹出浏览器当前窗口大小的 iframe,不会全屏显示。</p>
原文地址: http://www.cveoy.top/t/topic/QDh 著作权归作者所有。请勿转载和采集!