位置：广州松河 > 技术支持 > JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度_js/jQuery

jQuery

来源：网络整理时间：2023/3/4 0:57:14 共 3631 浏览

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

<!DOCTYPE html>
<html>
<head>
<script>
function changeSize()
{
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>
<body>
<iframe id="myframe" src="/default.asp"
height="200" width="200">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()"
value="Change size">
</body>
</html>

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

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

以下是js代码：

<script type="text/javascript">  
function reinitIframe() {  
    var iframe = document.getElementById("frame");  
    try {  
        var bHeight = iframe.contentWindow.document.body.scrollHeight;  
  
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;  
  
        var height = Math.max(bHeight, dHeight);  
  
        iframe.height = height;  
  
    } catch (ex) {}  
  
}  
window.setInterval("reinitIframe()", 200);  
</script>

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

页面使用方法：
<iframe name="ifr_show" id="ifr_show" src="#" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" onload="IFrameReSize('ifr_show');"></iframe>
JS:
<script language="javascript" type="text/javascript"> 
function IFrameReSize(iframename) {
var pTar = document.getElementByIdx_x(iframename);
if (pTar) {
//iframe高度自适应
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
pTar.height = pTar.contentDocument.body.offsetHeight;
}else if (pTar.Document && pTar.Document.body.scrollHeight) {
pTar.height = pTar.Document.body.scrollHeight;
}
//iframe宽度自适应
if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
pTar.width = pTar.contentDocument.body.offsetWidth;
}else if (pTar.Document && pTar.Document.body.scrollWidth) {
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>

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

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder=0 allowfullscreen></iframe>

css里设置iframe的宽度为100%

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

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：div+css在固定宽高下显示滚动条(右侧、下方)以及滚动条颜色 - overflow_CSS学习 | ·下一条：Font Awesome 图标字体库最简单教程 - 使用方法！_CSS学习