700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度 – js/jQuery –

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

时间:2022-07-21 15:51:51

相关推荐

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

以下是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_show"id="ifr_show"src="#"marginwidth="0"marginheight="0"frameborder="0"scrolling="no"width="100%"onload="IFrameReSize(ifr_show);"></iframe>JS:<scriptlanguage="javascript"type="text/javascript">functionIFrameReSize(iframename){varpTar=document.getElementByIdx_x(iframename);if(pTar){//iframe高度自适应if(pTar.contentDocument&&pTar.contentDocument.body.offsetHeight){pTar.height=pTar.contentDocument.body.offsetHeight;}elseif(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;}elseif(pTar.Document&&pTar.Document.body.scrollWidth){pTar.width=pTar.Document.body.scrollWidth;}}}</script>

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

<iframeheight=498width=510src="/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;//设定高度}}

JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度 – js/jQuery – 前端 jquery 提交多条数据

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。