全国统一服务热线:4008-0532-18  手机:18766290210
如何去掉iframe边框和让iframe高度自适应
发布时间:2016-11-09 14:35:09.0 作者:青岛做网站
   我们在做网站时经常用到iframe引用页面进行内嵌网站。但是为了用户体验和网站美观我们需要去掉iframe以及让iframe自适应高度。今天笔者就跟大家分享一下方法和技巧。

第一:iframe参数列表解读

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

name:内嵌帧名称

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

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

frameborder:内嵌帧边框 是否显示边缘;填”1″表示”是”,填”0″表示”否”

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

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

scrolling:是否出现滚动条(auto”为自动,“yes”为显示,“no”为不显示)

src:内嵌入文件的地址

style:内嵌文档的样式(如设置文档背景等)

allowtransparency:是否允许透明

第二:iframe宽度确定内容未知,高度不可预测的情况下如何去掉边框和自适应

   这个时候,我们可以给它添加一个默认的CSSmin-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>

上一篇:新手做网站优化必须要掌握的方法技巧                 下一篇: 哪些因素会影响网站关键词排名的稳定性

 
 
联系我们
青岛市市南区香港中路52号1615室(青岛国际新闻中心)
4008-0532-18
18766290210
早8:20~晚18:00
 
速联网络建站咨询速联网络建站