zoukankan      html  css  js  c++  java
  • iframe的打怪1

    自从页面中嵌入iframe,总是有各种悲伤,哎,还是上个情景吧:

    1、打怪情景:

    <body>

    <div name="header"></div>

    <iframe id="content" name="content"></iframe>

    <div name="bottom"></div>

    </body>

    出现的问题:content的iframe无法根据高度自适应。

    2、取经旅途

    大师兄:找了个看起来还不错的jquery插件,jquery-iframe-auto-height(地址:https://github.com/house9/jquery-iframe-auto-height)

    试了下,貌似ok,就放着当成了盾牌。

    过了一段时间,发觉遇到不同的怪物打不过啊,哎,结果师傅真的被抓走了。。。

    八戒:大师兄,师傅被抓走了!

    大师兄:一看不对啊,原来盾牌好久不升级了,估计各种问题,哎,算了,还是想想别的办法吧。

    大师兄找了个秘籍指引(http://caibaojian.com/iframe-adjust-content-height.html)关键就是下面的内容:

     1 function setIframeHeight(iframe) {
     2 if (iframe) {
     3 var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
     4 if (iframeWin.document.body) {//如果iframe下body有内容,则获取其高度,以便后续进行调整
     5 iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
     6 }
     7 }
     8 };
     9 
    10 window.onload = function () {
    11 setIframeHeight(document.getElementById('content'));
    12 };

    大师兄把秘籍放到了上面的页面中,我了个擦,好像能运行啊,秘籍指引下找到了师傅。

    师傅,师傅,你还好吗??

    师傅不回答。。。

    oh,师傅已经昏迷了。页面时好时坏,有时候正确显示,有时候长度差了一大截。

    大师兄再看了一下,哎,不同浏览器,load处理方式还不太一样,可能前后顺序啥的还有速度的导致调整的时候没显示完全。为了能够正确显示,大师兄加了一个setTimeout,给了一下延迟。

    结果是这样的:

    function setIframeHeight(iframe) {
    if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
    }
    };
    
    window.onload = function () {
    setTimeout("setIframeHeight(document.getElementById('content'));",500)
    };

    加了个延迟,处理方式不同,总归是会调用的。把调整页面的高度放到后面,这时候基本需要展示的东西都出来了,再去调整,高度也就不会差了。

    就这样,师傅,终于醒过来了。。。

     续集:

    师傅醒过来了,正常了一阵后,自己练了点别的技能,什么自动伸缩,能高能矮,时大时小~~~

    但是此时window的load已经执行完了,因此没有触发高度调整,导致师傅高的时候碰到了天花板,又晕过去了。。。嗝屁ing~~~~~~

    大师兄想了想:

    既然多加的东西改变了高度,在高度改变的地方,加个高度调整不就好了,师傅就碰不到天花板了!

    果断,每当触发高度改变后,加上高度调整:parent.window.setIframeHeight();//假定该函数是在iframe的父窗口中的。

    师傅就这样,又恢复了正常,醒了~妈妈再也不用担心我的师傅忽高忽矮了~~~~哈哈

    关于界面的高度:http://www.cnblogs.com/luckyflower/p/4359219.html

  • 相关阅读:
    关于JVM的一些东西
    网络的最大流最小割定理
    类的生命周期
    关于java中的不可变类(转)
    如何在Linux上升级java
    CAS操作
    如何使用fastJson来解析JSON格式数据和生成JSON格式数据
    计算机中如何实现除数是2的幂次的除法【转载自CSDN】
    python:使用Fabric自动化你的任务
    python中的元类
  • 原文地址:https://www.cnblogs.com/luckyflower/p/4233993.html
Copyright © 2011-2022 走看看