使用iframe标签时页面内容可以自适应

使用iframe标签时页面内容可以自适应

HTML页面

	<iframe src="" frameborder="0" scrolling="no" id="contIframs" onload="setIframeHeight(this)"></iframe>

需引入iframe页面的脚本（父页面）

//iframs高度自适应的方法
   function setIframeHeight(iframe) {
         if (iframe) {
             //确认对象
             var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
             if (iframeWin.document.body) {
             iframe.height = iframeWin.document.body.scrollHeight;   //获取ifram内页面内的内容高度
             }
         }
     };
	window.onload = function () {
	   setIframeHeight(document.getElementById('contIframs'));
	};

被引入的页面内容（子页面）

	//如果被引入的页面内容高度变化，外围的iframe高度也能达到自适应，可以加下面内容进入被引入页面内
        var bodyH = $('body').height();//获取body高度
        $('#contIframs', parent.document).height(bodyH)//为iframe重新赋值新的高度

另一种jq的load（）用法

	//直接用iframe感觉还是太坑了，所以建议如果项目不考虑跨域问题，可以直接用jQuery的load（）会更快捷
	 function loadPage(path) {
        // 加载新页面
         $('#contIframs').load(path)
     };
     loadPage('xin_xi.html');//页面内容会自动撑开