iframe如何实现全屏，高度自适应浏览器实现

iframe编写

<iframe id="iframe"
        name="iframe"
        height="100%"
        width="100%"
        src="http://sms.kkkliao.cn"
        scrolling="auto"
        frameborder="0"
        onload="changeFrameHeight()">
</iframe>

iframe的参数

iframe参数 取值 描述

align left、right、top、middle、bottom 对齐方式。规定如何根据周围的元素来对齐此框架。

height 像素值(px等)、百分比% iframe 的高度。

width 像素值(px等)、百分比% iframe 的宽度。

longdesc URL地址 规定一个页面，该页面包含了有关 iframe 的描述信息。

frameborder 1、0 是否显示边框。（0无边框、1有边框）

border 像素值 边框的厚度，默认为0

bordercolor 颜色 边框的颜色

marginheight pixels 定义 iframe 的【顶部和底部】的边距，也就是上下空出的高度。

marginwidth pixels 定义 iframe 的【左侧和右侧】的边距，也就是左右空出的高度。

name 自定义名称 规定 iframe 的名称。

sandbox allow-forms、allow-same-origina、llow-scripts、allow-top-navigation 启用一系列对 iframe 中内容的额外限制。

scrolling yes、no、auto 是否在 iframe 中显示滚动条。（yes有滚动条，no无滚动条，auto交给浏览器）

seamless seamless 规定 看上去像是包含文档的一部分。

src URL地址 规定在 iframe 中显示的页面的 URL地址。链接到的地址。

srcdoc HTML_code 规定在 iframe 中显示的页面的 HTML 内容。

allowtransparency yes、no 背景是否透明（yes透明、no不透明）

framespacing 像素值（取值：正整数和0） 相邻间距，相邻浮动帧之间的间距

JS读取height赋值

<script>
    function changeFrameHeight() {
        var iframe = document.getElementById("iframe");
        iframe.height = document.documentElement.clientHeight;
    }
    //onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数
    //onresize事件会在窗口或框架被调整大小时发生
    window.onresize = function() {
        changeFrameHeight();
    }
</script>

本文链接：https://www.kkkliao.cn/?id=92 转载需授权！