我需要一个自动调整iframe的宽度和高度的解决方案,以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。
当前回答
对于angularjs的directive属性:
G.directive ( 'previewIframe', function () {
return {
restrict : 'A',
replace : true,
scope : true,
link : function ( scope, elem, attrs ) {
elem.on ( 'load', function ( e ) {
var currentH = this.contentWindow.document.body.scrollHeight;
this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
} );
}
};
} );
注意百分比,我插入它,这样你可以对抗缩放通常做的iframe,文本,广告等,简单地放0如果没有缩放是实现
其他回答
上下文
我不得不在网络扩展的环境中自己做这件事。这个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)
简单性:
var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
可以创建一个“幽灵般的”IFrame,就像它不存在一样。
参见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/
中描述的事件系统parent.postMessage(..) https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
这适用于所有现代浏览器!
使用bootstrap的嵌入响应类,它最初是为youtube视频,但你可以调整它的高度。
如果你不能使用javascript,我建议使用引导和玩周围的嵌入响应-***类的html。我能够通过添加填充底部作为百分比来实现同样的效果,从而进一步相应地调整它。
<span class="iframe embed-responsive embed-responsive-16by9" style="display:block; padding-bottom: 10%;">
<iframe class="embed-responsive-item" width="100%" scrolling="no" src="example.com" frameBorder="0" ></iframe>
</span>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?