网站制作教程

怎样去掉iframe边框让其自适应

作者:admin 分类:网站制作教程 2017-04-18 23:27:14 我要评论(0)

济南网站制作时经常用到iframe引证页面进行内嵌网站。可是为了用户体会和网站漂亮咱们需求去掉iframe以及让iframe自适应高度。今日济南网站制作就跟咱们共享一下办法和技巧。

榜首:iframe参数列表解读


frame元素的功用是在一个文档里内嵌一个文档,创建一个起浮的帧。iframe参数列表


name:内嵌帧称号


width:内嵌帧宽度(可用像素值或百分比)


height:内嵌帧高度(可用像素值或百分比)


frameborder:内嵌帧边框 是不是显现边际;填”1″表明”是”,填”0″表明”否”


marginwidth:帧内文本的左右页边距


marginheight:帧内文本的上下页边距


scrolling:是不是呈现滚动条(“auto”为主动,“yes”为显现,“no”为不显现)


src:内嵌入文件的地址


style:内嵌文档的款式(如设置文档布景等)


allowtransparency:是不是答应通明


第二:iframe宽度确定内容不知道,高度不行猜测的情况下怎么去掉边框和自适应


   这个时候,咱们可以给它增加一个默许的CSS的min-height值,然后一起使用javascript改动高度。常用的兼容代码有:


<iframe src="qdsulian.com.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>


<script type="text/javascript">


function setIframeHeight(iframe) {


if (iframe) {


var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;


if (iframeWin.document.body) {


iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;


}


}


};


window.onload = function () {


setIframeHeight(document.getElementById(’external-frame’));


};


</script> 


第三:iframe内容宽度改变的iframe高度自适应,高度不行猜测的情况下怎么去掉边框和自适应


<iframe src="qdexun.cn.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>


<script type="text/javascript">


function reinitIframe(){


var iframe = document.getElementById("test");


try{


var bHeight = iframe.contentWindow.document.body.scrollHeight;


var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;


var height = Math.max(bHeight, dHeight);


iframe.height = height;


console.log(height);


}catch (ex){}


}


window.setInterval("reinitIframe()", 200);


</script>


1.本站文章源自网络,大部分原创内容。如有发现侵权等问题,请联系删除,谢谢。
2.更多原创内容源自济南网站建设公司
        3.济南网站建设公司提供:济南建设济南手机网站制作济南网站开发济南网站优化等服务

相关文章
网友点评

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新留言
    标签列表