javascript - 使 Iframe 高度适合其内容

标签 javascript jquery iframe

有没有办法让 iframe 的高度适合它的内容?你能告诉我怎么做吗? 我尝试在网上搜索和尝试代码,但没有成功

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />

<title></title>

</head>

<body>
    <div align="center" style="z-index:1;">
    <?php include 'header.html' ?>

        <iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>

    </div>

</body>

</html>

最佳答案

由于我们处于 CSS3 时代,您可以使用视口(viewport)单位来实现这一点。这些单位允许您根据视口(viewport)宽度和视口(viewport)高度的百分比指定大小。这是用户的视口(viewport),也称为屏幕。但是,在我尝试过的所有主要浏览器中,如果您将 iframe 放在一个 div 中,而该 div 位于另一个 div 中并相对定位,则视口(viewport)单位是相对于此 div 的。由于 100 个视口(viewport)高度单位意味着 100% 高度,您可以这样做:

<div id="parent">
    <div id="wrapper" style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
    </div>
</div>

我发现这是最好的解决方案,因为它是跨域,并且完全按照您想要的方式显示,没有任何 javascript 或其他复杂的东西。

最重要的是,它适用于所有浏览器,甚至是移动浏览器(已在 android 和 iphone 上测试)!

关于javascript - 使 Iframe 高度适合其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17961006/

相关文章:

jQuery template() 用于将 URL 放入图像的 src= 属性中

jquery - 将一个 iframe 覆盖在另一个 iframe 上

javascript - 如何在一个地方上/下移动 div 在 jquery 中使用 onclick

javascript - 多级水平菜单 CSS

javascript - 从服务器检索 JSON.parse() 字符串

iframe - 无法播放YouTube视频后正确设置相关视频

javascript - 使用 Chrome 扩展内容脚本将 iframe 加载到页面中

javascript - 根据放置正则表达式区分相似值

javascript - Jquery按数组中的元素值排序

jquery ui 按钮 : how can I add a clicked state look to a button that's not a checkbox or radio button?