在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面。本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在android、ios4及以下,会失效(这个可以使用iscroll.js来解决,)。最后改为iframe来显示文章内容。这里涉及到子页面和父页面的通信问题,不清楚可以看js之iframe子页面与父页面通信

我在子页面获取到父页面传递过来的文章内容时,使用innerHTML将内容放入div中。代码如下:

<div id="article-area-id">
<div class="article-area" id="art">
</div>
</div>
<div id="close"></div>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script>
var close_e = document.getElementById("close"),
e = document.getElementById("art");
function get(data){
e.innerHTML = data;
close_e.setAttribute("class","close");
resizeIframe();
}
function resizeIframe(){
parent.setIframe(document.body.offsetHeight);
}
close_e.addEventListener("click",function(){
parent.closeIframe();
close_e.removeAttribute("class");
}); </script>

在innerHTML后,iframe的高度并没有因为里面内容增加而改变,这里就需要iframe的高度自适应了。这里有一篇博文:Js动态获取iframe子页面的高度总结

但是我这里情况和这篇博文说的不同,因为我的iframe在设置内容时,已经加载了,并不会触发onload事件,所以我采用子页面重新获取自己的高度,然后传递给父页面,

父页面再来设置子页面iframe的高度。

function setIframe(count) {
var e = document.getElementById("ifm-id"),
clientWidth = document.body.clientWidth,
sty;
sty="height:"+(count+50)+"px;top:"+$(document).scrollTop()+"px;left:"+ (clientWidth>600?clientWidth*0.2+"px":clientWidth*0.1+"px");
e.setAttribute("style",sty);
e.scrolling="no";
//重置主页面高度,解决如果弹出文章高度超过页面高度时显示不完全。
if(count+$(document).scrollTop() > document.body.clientHeight){
document.body.height = count+$(document).scrollTop();
}
}

在上面代码处理后,就可以重置iframe的高度了,但是由于内容里面包含图片,如果在传递给父页面高度时,子页面还没有加载图片,就可能出现传给父页面的高度小于图片加载完成后的高度,导致子页面显示不完全。最开始,我想到一篇博文 《JS快速获取图片宽高的方法》,然后使用正则srcReg = /http:\/\/\S*\.(jpg|png|jpeg)\S*(?=")/g,将所有的图片全部获取然后获得宽高,为每个img设置width和height属性,这样就能获取iframe的正确高度而且还能根据设备的屏幕宽度将太大的图片缩小。但是由于我是从第三方抓取文章,请求图片会遇到304权限问题时使用正则将无法获取的图片隐藏,代码如下:

imgReg = /src=\S*\.(jpg|png|jpeg)\S*"/g;
des = description.replace(imgReg,function($1){
return $1+' onerror=\"this.style.display=\'none\';return true;\"';
})

如果图片没有权限,将会报异常,但是由于无法捕获图片的异常,就不能及时的终止获取图片宽高的请求事件,这回导致无法快速获取图片宽高,在多个图片的时候会有很大的延迟。这个问题纠结了好久,没有找到好的解决方案,记下来看看以后能不能看到别人的解决方法。

这里有一点疑问,留作下次试验,那就是img下载完成后,使用innerHTML将HTML代码写入文档后,图片是不是在缓存中读取,如果不是会导致额外的网络请求,这样肯定是不好的。最后采用的解决方法是在父页面获取滚动事件,判断子页面body高度和iframe高度是否一致,如果不一致,则跳转iframe高度。

    $(window).scroll(function(){
$this = $(this);
if($(document).height() - $this.height() - $this.scrollTop() < 400){
$(".loadImg").addClass("load");
addContainer(10);
}
var $ifm = $("#ifm-id");
var ifmHeight = $(document.getElementById("ifm-id").contentWindow.document.body).height();
if($ifm.height() !== (ifmHeight+50)){
$ifm.height(ifmHeight + 50);
}
});

  

判断图片加载完成,自适应iframe高度的更多相关文章

  1. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  2. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  3. js判断图片加载完成

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  4. eayui js动态加载Datagrid,自适应宽度,高度

    HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> ...

  5. javascrip笔记——图片加载

    var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载状况,加载完成后回调 isImgLoad(function(){ // 加载完成 }); / ...

  6. 移动web图片加载完获取img宽高

    1.vue中 @load=function(){}   等待img加载完触发load函数 2.window.load=function(){var imgheight=$(".btnimg& ...

  7. 自适应文案提示框、无数据图片加载<IOS小组件>

    非常感谢,帮助我的朋友们,谢谢你们. 该组件的编写仅仅用来不到4个小时,包括测试与修改bug.为他起名为AdaptivePromptDialogBox(就是自适应文案提示框): 呆毛地址:链接 < ...

  8. android 浏览器对图片加载高度渲染问题

    今天在开发有道汉语词典移动版的时候遇到了一个很奇怪的问题. 在android设备上访问的时候,总是发现有底部背景色不能完全渲染出来的情况(有时候又是正常的,一会儿出现一会儿不出现,iphone设备也是 ...

  9. vue判断图片为空或者图片加载不成功时显示默认图片

    纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:af ...

随机推荐

  1. 【原创】【ViewFlow+GridView】Parameter must be a descendant of this view问题分析

    关于ViewFlow和GridView嵌套导致Parameter must be a descendant of this view问题的解决方案 [关于ViewFlow]   ViewFlow是一款 ...

  2. Data Base 关于nosql的讲解

    Data Base  关于nosql的讲解 nosql非关系型数据库. 优点: 1.可扩展 2.大数据量,高性能 3.灵活的数据模型 4.高可用 缺点: 1.不正式 2.不标准 非关系型数据库有哪些: ...

  3. (九)ASP.NET自定义用户控件(2)

    http://www.cnblogs.com/SkySoot/archive/2012/09/04/2670678.html 用户控件 在 .NET 里,可以通过两种方式把自己的控件插入到 Web 窗 ...

  4. cdev、udev

    udev :应用层的守护进程,由启动脚本加载,负责建立热拨插的接点 cdev :建立字符设备接口 platform device :相关平台直接总线建立的设备,主要出现需要自己直接挂到平台的时候,因为 ...

  5. MTK6515 android打版软件配置(DrvGen.exe 使用)

    1 一.配置GPIO 2 二.配置emmc 3 三.配置LCM 3.1 1.增加LCM驱动文件 3.2 2.配置驱动文件 3.3 3.配置背光 4 四.配置touch panel 4.1 1.通过dc ...

  6. 【笨嘴拙舌WINDOWS】BMP图片浏览器

    要将文件显示成图片这其中需要经过 1.将磁盘文件内容读取到内存: 2.将文件对应内存里包含的像素为以及像素信息转化为显示驱动器能理解的格式: 3.将转化过后的内存送到显卡的缓存区 4.显示器读取缓存现 ...

  7. c#快捷键大全

    转发:http://zhidao.baidu.com/question/444655283 直接贴出来吧(关于VS的): 快捷键 功能 CTRL + SHIFT + B生成解决方案 CTRL + F7 ...

  8. 基于Flume的美团日志收集系统(二)改进和优化

    在<基于Flume的美团日志收集系统(一)架构和设计>中,我们详述了基于Flume的美团日志收集系统的架构设计,以及为什么做这样的设计.在本节中,我们将会讲述在实际部署和使用过程中遇到的问 ...

  9. Context上下文对象(抄书的)

    Servlet上下文 ServletContext 上下文接口    ServletContext接口    每一个应用都有唯一的一个上下文对象,即为ServletContext对象    Servl ...

  10. I.MX6 Android backlight modify by C demo

    /************************************************************************** * I.MX6 Android backligh ...