JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度

《JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度》正文开始，本次阅读大概4分钟。

方法一：JS动态修改iframe高度和宽度的方法

!DOCTYPEhtml
html
head
script
functionchangeSize()
{
document.getElementById(myframe).height=300;
document.getElementById(myframe).width=300;
}
/script
/head
body
iframeid=myframesrc=/default.asp
height=200width=200
pYourbrowserdoesnotsupportiframes./p
/iframe
brbr
inputtype=buttononclick=changeSize()
value=Changesize
/body
/html

方法二：iframe 去除边框和自适应高度

因为做项目经常要用到页面镶嵌，每次都忘记一些细节问题，特地写下来以便查阅，很久以前是网上搜到一些前辈的，但是时间太久忘记是哪位了，没办法给具体链接。

以下是js代码：

scripttype=text/javascript
functionreinitIframe(){
variframe=document.getElementById(frame);
try{
varbHeight=iframe.contentWindow.document.body.scrollHeight;

vardHeight=iframe.contentWindow.document.documentElement.scrollHeight;

varheight=Math.max(bHeight,dHeight);

iframe.height=height;

}catch(ex){}

}
window.setInterval(reinitIframe(),200);
/script

方法三：js控制iframe的高度/宽度，自适应内容

页面使用方法：
iframename=ifr_showid=ifr_showsrc=#marginwidth=0marginheight=0frameborder=0scrolling=nowidth=100%onload=IFrameReSize(ifr_show);/iframe
JS:
scriptlanguage=javascripttype=text/javascript
functionIFrameReSize(iframename){
varpTar=document.getElementByIdx_x(iframename);
if(pTar){
//iframe高度自适应
if(pTar.contentDocumentpTar.contentDocument.body.offsetHeight){
pTar.height=pTar.contentDocument.body.offsetHeight;
}elseif(pTar.DocumentpTar.Document.body.scrollHeight){
pTar.height=pTar.Document.body.scrollHeight;
}
//iframe宽度自适应
if(pTar.contentDocumentpTar.contentDocument.body.offsetWidth){
pTar.width=pTar.contentDocument.body.offsetWidth;
}elseif(pTar.DocumentpTar.Document.body.scrollWidth){
pTar.width=pTar.Document.body.scrollWidth;
}
}
}
/script

方法四：html5移动端引入优酷视频iframe自适应

iframeheight=498width=510src=http://player.youku.com/embed/XMTI4MjU5OTA3Mg==frameborder=0allowfullscreen/iframe

css里设置iframe的宽度为100%

根据屏幕宽度自适应，这里我设定视频16/9的固定比例

window.onload=window.onresize=function(){
resizeIframe();
}
varresizeIframe=function(){
varbodyw=document.body.clientWidth;
for(varilength=0;ilength=document.getElementsByTagName(iframe).length;ilength++){
document.getElementsByTagName(iframe)[ilength].height=bodyw*9/16;//设定高度
}
}