【JS】点击目标外事件与IFRAM自适应高度

 一、点击目标外事件

$(document).mouseup(function(e){
    var _con = $('.dropdown-multiSelect-list');   // 设置目标区域
    if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
        _con.hide();// 功能代码
    }
});

 

二、IFRAME自适应高度

兼容IE6/IE7/IE8/Firefox/Opera/Chrome/Safari

1，原生JS

<iframe src="../Index.aspx" id="iframe" frameborder="0" scrolling="no" onload="iFrameHeight();" width="100%"></iframe>
function iFrameHeight() {
    var ifm = document.getElementById("iframe");
    var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
    if (ifm != null && subWeb != null) {
         ifm.height = subWeb.body.scrollHeight;
    }
}

2，JQUERY

方法一（子页面调用）

//注意：下面的代码是放在iframe引用的子页面中调用
$(window.parent.document).find("#iframe").load(function(){
　　var main = $(window.parent.document).find("#iframe");
　　var thisheight = $(document).height()+30;
　　main.height(thisheight);
});

方法二（父页面调用）

//注意：下面的代码是放在和iframe同一个页面调用
$("#iframe").load(function(){
　　var mainheight = $(this).contents().find("body").height()+30;
　　$(this).height(mainheight);
});

 

三、思考

关于自适应，业务中遇到一个问题。

在chrome中，父页面调用上述JQUERY方法二，子页面有图片的情况下，onload方法失效，而在IE下反而是正常的。

同页面的其他无图片的子页面，高度获取正常，需要思考解决。

————————————————————————————————————————————————————————————————————————————

2016/10/25更新

子页面有图片的情况下，父页面写入自适应高度失效，通过子页面控制高度可以修复。