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

iframe编写

<iframe id="iframe"
        name="iframe"
        height="100%"
        width="100%"
        src="https://www.baidu.com"
        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>

效果：