设置Iframe元素

Iframe元素介绍

<iframe id="iframeC" src="url" frameborder="no" border="0" scrolling="yes"  style="width: 100%;height: 100%;"></iframe>

<!--   
	 id="iframeC" ---- 元素id
	 src="url" --- 内嵌网页地址
	 frameborder="no"  border="0" --- 这样就可以把iframe默认的边框去掉
	  scrolling="yes"  --- 是否滚动
	  style 设置样式 例如 width height
-->

Iframe设置html,body,子元素样式

有时候我们会碰到需要继承父元素宽高的场景，通过给html,body,最外层的div设置宽高100%来继承。

	document.getElementById('iframeC').onload = ()=>{//Iframe加载完成后
         //获取iframe的document
        let iframeDocument = document.getElementById("iframeC").contentDocument;
        //获取iframe的window
        let iframeWindow  = document.getElementById('iframeC').contentWindow;
        //设置body的宽高
        iframeDocument.body.style.width = '100%';
        iframeDocument.body.style.height = '100%';
        //设置html宽高
        iframeWindow.document.getElementsByTagName('html')[0].style.width = '100%';
        iframeWindow.document.getElementsByTagName('html')[0].style.height = '100%';
        //设置iframe里面具体元素的宽高
        iframeWindow.document.getElementById('app').style.width = '100%';
        iframeWindow.document.getElementById('app').style.height = '100%';
   }