如何让iframe框架自适应高度和宽度及iframe弹窗-HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  时间轴
  •  留言板
  • 
    如何让iframe框架自适应高度和宽度及iframe弹窗
     作者:胡新春  发布时间:2017-08-28 16:12:02  访客:633

    我从来对iframe就没有什么好感,对其基本上是不屑一顾。但是人在江湖,身不由己。下面是让iframe框架自适应高度和宽度兼容性也没问题,于是,写个小文备忘下,下次再使用的时候就到这儿拷贝核心代码。


    html应用部分:


    <iframe src="index.html" id="iframepage" frameborder="0" scrolling="no" 
    marginheight="0" marginwidth="0" onLoad="iFrameHeight()"></iframe>


    js插入部分:


    <script type="text/javascript" language="javascript">   
    function iFrameHeight() {   
    var ifm= document.getElementById("iframepage");   
    var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
    if(ifm != null && subWeb != null) {
       ifm.height = subWeb.body.scrollHeight;
       ifm.width = subWeb.body.scrollWidth;
    }   
    }   
    </script>


    一小段js解决,自己在IE 火狐 谷歌都测试通过的。



    二、js弹出对话框的方法总结


    以窗口形式打开新页面:


    js代码部分:


    <script LANGUAGE="javascript"> 
    
    window.open("page.html", "newwindow","height=100, width=400, top=0,left=0,
    toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no,status=no") 
    
    </script>


    html部分:


    以链接的形式打开


    <a href="#" onclick="openwin()">打开一个窗口</a>


    按钮的形式打开


    <input type="button" onclick="openwin()" value="打开窗口">


    参数解释: 


    window.open 弹出新窗口的命令; 

    "page.html" 弹出窗口的文件名; 

    "newwindow" 弹出窗口的名字(不是文件名),非必须,可用空""代替; 

    height=100 窗口高度; 

    width=400 窗口宽度; 

    top=0 窗口距离屏幕上方的象素值; 

    left=0 窗口距离屏幕左侧的象素值; 

    toolbar=no 是否显示工具栏,yes为显示; 

    menubar,scrollbars 表示菜单栏和滚动栏。 

    resizable=no 是否允许改变窗口大小,yes为允许; 

    location=no 是否显示地址栏,yes为允许; 

    status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 


    点评一下

    
    程序:HXC博客v1.0+ 主题:HXC博客前端Funs主题    环境:lamp  后台
    博客平稳运行2年+