文章目录

  • 1、iframe在pad中失去滚动条
  • 2、pad中iframe弹出模态框
  • 3、可输入标签在Safari浏览器中无法输入
  • 4、在iframe中的滚动条消失


1、iframe在pad中失去滚动条

iframe在ipad上的兼容性确实有问题
在弹出iframe窗口的时候，可能会失去滚动条
解决方案为

  1. 在iframe外层嵌套一个空<div>元素，给该元素设置滚动条
  2. 如果是使用layer，可以在iframe渲染完毕以后，给外层元素添加滚动条：
layer.open({
    type: 2,
    title: CEN.MNJTX,
    shadeClose: true,
    shade: false,
    area: ['893px', '600px'],
    //maxmin: true, //开启最大化最小化按钮
    content: url,
    success: function(layero) {
        $(layero).addClass("scroll-wrapper"); 
        //苹果 iframe 滚动条失效解决方按，添加该类则有滚动条
    }
});
  1. 可以将弹出iframe窗口，改为跳转到另外一个页面；建议最好不要用iframe，可以使用弹出模态框，将内容写入模态框中；否则还会有其它问题。
  2. 给iframe中的所有内容添加一个div并且给该div设置以下样式
    推荐使用这种方案，可以避免模态框的弹出位置不固定问题
{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}

2、pad中iframe弹出模态框

在pad上弹出iframe，iframe中又弹出模态框，模态框的位置出现无规律可循；
原因是iframe的滚动条长度超出了父页面高度
而模态框的位置是依赖父页面定位的，这样就产生了一系列问题

解决方案是:
将模态框写到父页面，在iframe中调用父页面的方法，弹出父页面的模态框，让该模态框的z-index属性大于iframe的，这样模态框的位置就固定了。

在iframe窗口的作用域中调用该方法，就可以获取的打开该iframe的window对象
然后就可以调用弹出模态框的方法

//在iframe中使用
window.parent //获取父页面window对象
window.parent.openModal() //调用父页面方法
//父页面中的方法
function openModal(){
	$("#modalId").modal()//弹出模态框
}

在父页面获取iframe的window对象

//在父页面使用
$("iframe")[0].contentWindow //获取iframewindow对象

3、可输入标签在Safari浏览器中无法输入

这是因为这些标签上面有draggable="true"属性；
在Safari中会渲染出这个样式

input[draggable=true] {
-webkit-user-drag: element;
-webkit-user-select: none;
}

4、在iframe中的滚动条消失

iframe内容中的滚动条有时候会消失，这是因为焦点到了它的父页面
缩小iframe的尺寸，可以看到父页面在滚动