怎么让iframe自适应浏览器的高度和宽度

怎么让iframe自适应浏览器的高度和宽度,第1张

让iframe自适应浏览器的高度宽度的具体步骤如下:

1、首先设置样式:body{margin:0padding:0}。

2、如果不设置body的margin和padding为0的话,页面上下左右会出现空白。

代码如下:<iframe src=://fulibac id="myiframe" scrolling="no" frameborder="0"></iframe>。

3、这个方法可以达到让iframe自适应高度的效果,但是如果将窗口放大或缩小效果就不出来了,也就是本文开头讲的。

需要再次刷新,那就不属于自适应了。

代码是:

var ifm= document.getElementById("myiframe")

ifm.height=document.documentElement.clientHeight

一、iframe

元素会创建包含另外一个文档的内联框架(即行内框架)。

二、有以下方式对iframe进行设置高度和宽度

1、iframe元素标签可以使用width和height属性,

<iframe

src

="/index.html"

width="400"

height="300"></iframe>

2、可以使用css来定义宽度和高度

<iframe

src

="/index.html"

style="width:400pxheight:300px"></iframe>

三、补充:

iframe的属性如下:

可以用jQuery获取到当前的窗口的宽度,来计算iframe的宽和高,示例代码如下:

<iframe src="http://www.baidu.com" frameborder="0" id="demo"></iframe>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script>

$(document).ready(function() {

  var ifr_width=$(window).width()*0.75

  $("#demo").css('width',ifr_width)

  $("#demo").css('height',ifr_width*0.75)

})

</script>

jQuery中获取当前窗口的宽度代码是:$(window).width()


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11007099.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-12
下一篇 2023-05-12

发表评论

登录后才能评论

评论列表(0条)

保存