使用iframe 代码如下:
出现这个问题的原因主要是 iframe 设置的高度是100%,没有设置具体的高度,导致子窗口没有参考物导致其即使设置了高度也不能讲父元素撑开。出现这种情况目前有二种方式:
给iframe 设置样式 overflow: auto;
通过 js 获取窗体的高度,减去头部和底部的高度剩下的就是内容的高度,然后给iframe 设置高度,具体代码如下:
$(window).on('resize', function () {
let resizeTimer = null;
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
setContentSize();
}, 500);
}).resize();
function setContentSize() {
var $content = $('.admin-nav-card .layui-tab-content');
$content.height($(this).height() - 147);
$content.find('iframe').each(function () {
$(this).height($content.height());
$(this).width($content.width());
$(this).contents().find(".layui-layer-iframe").width($content.width())
});
}
解释一下,主要是监听窗体调整,获取窗体的高度,减去头部和底部的高度剩下的就是$content的高度,然后给iframe设置高度,代码中运行了延迟加载,防止函数执行过快。
function setContentSize() {
var $content = $('.admin-nav-card .layui-tab-content');
$content.height($(this).height() - 147);
$content.find('iframe').each(function () {
$(this).height($content.height());
$(this).width($content.width());
});
}
结果还是出现上述那个问题,那到底为啥呢?然后通过F12 模式 调试了一下,原来弹框里面有一个div也设置了宽度,那我跟iframe一起一并修改呢?
function setContentSize() {
var $content = $('.admin-nav-card .layui-tab-content');
if ($(this).width > 768) {
}
$content.height($(this).height() - 147);
$content.find('iframe').each(function () {
$(this).height($content.height());
$(this).width($content.width());
$(this).contents().find(".layui-layer-iframe").width($content.width())
});
}.
这样终于算解决问题了,有一个前端小伙伴告诉我还有一种方式,就是改变窗体宽度的时候,调用一个layer.full(index),index 是创建弹窗的编号。这种方式好处就是内部自动根据窗体宽度调整弹窗宽度,但是有个问题我怎么去获取那个index呢?这个问题等以后解决吧,先放放。。。
现在是pc端解决了适配,但是手机端呢,用上述的代码显示的页面不能左右移动。这下就需要Google一把了,带着问题去搜索了一下网上大佬说:先给iframe 套一个div 然后给div设置样式
@media screen and (max-width: 768px) {
/* 主体容器 */
.admin-nav-card .layui-tab-item {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
}
结果试了一次果真可以实现,但是由于手机品牌很多,需要适配就难上加难,由于自己又不是一个前端人员就先放放了,等有时间在跟着上述的问题一起解决。
参考文档:
子窗口高度不够
iphone下iframe问题记录