我需要一个自动调整iframe的宽度和高度的解决方案,以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。
当前回答
上下文
我不得不在网络扩展的环境中自己做这件事。这个web扩展在每个页面中注入了一些UI,并且这个UI存在于一个iframe中。iframe内部的内容是动态的,所以我必须重新调整iframe本身的宽度和高度。
我使用React,但这个概念适用于每个库。
我的解决方案(这假设您同时控制页面和iframe)
在iframe内部,我改变了车身样式,使其具有真正大的尺寸。这将允许内部元素布局使用所有必要的空间。使宽度和高度100%不适合我(我猜是因为iframe有一个默认的宽度= 300px和高度= 150px)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
然后我把所有的iframe UI注入到一个div中,并给它一些样式
#ui-root {
display: 'inline-block';
}
在渲染我的应用程序在这个#ui-root(在React中,我在componentDidMount中这样做)后,我计算这个div的尺寸,并使用window.postMessage将它们同步到父页面:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
在父框架中,我这样做:
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)
其他回答
以防有人说到这里 当我从iframe中删除div时,我有一个解决方案的问题- iframe没有变短。
有一个Jquery插件,做的工作:
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
如果你正在寻找一个没有jQuery跨起源的解决方案,你可能想看看我的想法:
<main id="container"></main>
<script>
fetch('https://example.com').then(response => {
return response.text();
}).then(data => {
const iframeContainer = window.document.getElementById('container');
const iframe = document.createElement('iframe');
iframe.frameBorder = 'none';
iframe.width = '100%';
iframe.addEventListener("load", function() {
iframe.height = iframe.contentWindow.document.body.scrollHeight;
})
const finalHtml = data;
const blob = new Blob([finalHtml], {type: 'text/html'});
iframe.src = window.URL.createObjectURL(blob);
iframeContainer.appendChild(iframe);
})
</script>
跨浏览器jQuery插件。
cross -bowser, cross - domain library,使用mutationObserver来保持iFrame的大小与内容一致,使用postMessage在iFrame和主机页面之间进行通信。使用或不使用jQuery。
这里有几种方法:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
还有另一种选择
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
隐藏滚动与2个替代方案如上所示
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
使用第二代码进行破解
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
为了隐藏iFrame的滚动条,父元素被设置为“overflow:hidden”来隐藏滚动条,iFrame的宽度和高度被设置为150%,这迫使滚动条在页面之外,由于主体没有滚动条,人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!
来源:设置iframe自动高度
我发现这个调整器工作得更好:
function resizer(id)
{
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).height = height;
document.getElementById(id).width = width;
}
注意,样式对象被删除了。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?