当前位置： 文江博客话题详情

全屏iframe高度为100%

发布于 2024-11-05 05:44:32 字数 519 浏览 1 评论 0原文

所有浏览器都支持 iframe height=100% 吗？

我使用 doctype 作为：

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

在我的 iframe 代码中，如果我说：

<iframe src="xyz.pdf" width="100%" height="100%" />

我的意思是它实际上会占用剩余页面的高度（因为顶部有另一个框架，固定高度为 50px） 所有主要浏览器（IE/Firefox/Safari）都支持此功能吗？

另外关于滚动条，即使我说 scrolling="no"，我仍然可以在 Firefox 中看到禁用的滚动条...如何完全隐藏滚动条并自动设置 iframe 高度？

原文

Is iframe height=100% supported in all browsers?

I am using doctype as:

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

In my iframe code, if I say:

<iframe src="xyz.pdf" width="100%" height="100%" />

I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px)
Is this supported in all major browsers (IE/Firefox/Safari) ?

Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox...How do I completely hide scrollbars and set the iframe height automatically?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（20）

罪歌 2024-11-12 05:44:32

您可以使用框架集作为前面的答案状态，但如果您坚持使用 iFrame，则以下 2 个示例应该有效：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

替代方案：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

使用 2 个替代方案隐藏滚动，如上所示：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

使用第二个示例进行黑客攻击：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

隐藏滚动条iFrame 的父级被设置为 overflow:hidden 来隐藏滚动条，并且 iFrame 被设置为达到 150% 的宽度和高度，这会强制滚动条在页面之外，因为主体不会有滚动条的人可能不会想到 iframe 会超出页面的边界。这会隐藏全宽 iFrame 的滚动条！

You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

An alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

To hide scrolling with 2 alternatives as shown above:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack with the second example:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

回复 原文
成熟稳重的好男人 2024-11-12 05:44:32

创建全屏 iframe 的 3 种方法：

  • 方法 1 - 视口百分比长度

    在支持的浏览器中，您可以使用视口百分比长度，例如高度：100vh。

    其中 100vh 表示视口的高度，同样 100vw 表示宽度。

    此处示例

    正文 {
    保证金：0； /* 重置默认保证金 */
}
内联框架{
    显示：块； /* iframe 默认是内联的 */
    背景：#000；
    边框：无； /* 重置默认边框 */
    高度：100vh； /* 视口相对单位 */
    宽度：100vw；
}

  • 方法 2 - 固定定位

    这种方法相当简单。只需设置 fixed 元素的位置并添加 height/width 为 100%。

    此处示例

    iframe {
    位置：固定；
    背景：#000；
    边框：无；
    顶部：0；右：0；
    底部：0；左：0；
    宽度：100%；
    高度：100%；
}

  • 方法 3

    对于最后一个方法，只需将 body/html/iframe 元素的 height 设置为 <代码>100%。

    此处示例

    html, body {
    高度：100%；
    保证金：0； /* 重置 body 元素的默认边距 */
}
内联框架{
    显示：块； /* iframe 默认是内联的 */
    背景：#000；
    边框：无； /* 重置默认边框 */
    宽度：100%；
    高度：100%；
}

3 approaches for creating a fullscreen iframe:

  • Approach 1 - Viewport-percentage lengths

    In supported browsers, you can use viewport-percentage lengths such as height: 100vh.

    Where 100vh represents the height of the viewport, and likewise 100vw represents the width.

    Example Here

    body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
    <iframe></iframe>

  • Approach 2 - Fixed positioning

    This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

    Example Here

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>

  • Approach 3

    For this last method, just set the height of the body/html/iframe elements to 100%.

    Example Here

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>

回复 原文
泪意 2024-11-12 05:44:32

我遇到了同样的问题，我正在将 iframe 拉入 div 中。试试这个：

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

高度设置为 100vh，代表视口高度。另外，宽度可以设置为 100vw，尽管如果源文件具有响应能力，您可能会遇到问题（您的框架将变得非常宽）。

I ran into the same problem, I was pulling an iframe into a div. Try this:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

The height is set to 100vh which stands for viewport height. Also, the width could be set to 100vw, although you'll likely run into problems if the source file is responsive (your frame will become very wide).

回复 原文
柠檬心 2024-11-12 05:44:32

1. 将 DOCTYPE 更改为不太严格的内容。不要使用 XHTML；这很愚蠢。只需使用 HTML 5 文档类型就可以了：

<!doctype html>

2. 您可能需要确保（取决于浏览器）iframe 的父级具有高度。及其父级。及其父级。 ETC：

html, body { height: 100%; }

1. Change your DOCTYPE to something less strict. Don't use XHTML; it's silly. Just use the HTML 5 doctype and you're good:

<!doctype html>

2. You might need to make sure (depends on the browser) that the iframe's parent has a height. And its parent. And its parent. Etc:

html, body { height: 100%; }
回复 原文
谜兔 2024-11-12 05:44:32

这对我来说非常有效（仅当 iframe 内容来自相同域时）：

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

This worked very nicely for me (only if iframe content comes from the same domain):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
回复 原文
千纸鹤 2024-11-12 05:44:32
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
回复 原文
逆光飞翔i 2024-11-12 05:44:32
body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>

回复 原文
翻了热茶 2024-11-12 05:44:32

< /代码>


<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

回复 原文
我的鱼塘能养鲲 2024-11-12 05:44:32

要获得 iframe 内没有滚动条的全屏 iframe，请使用以下 css。不需要更多

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }

To get a full screen iframe without a scrollbar inside the iframe use the following css. Nothing more is required

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }
回复 原文
你是年少的欢喜 2024-11-12 05:44:32

以下测试工作

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

The following tested working

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
回复 原文
坦然微笑 2024-11-12 05:44:32

首先添加 css

html,body{
height:100%;
}

这将是 html：

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>

You first add css

html,body{
height:100%;
}

This will be the html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
回复 原文
最舍不得你 2024-11-12 05:44:32

http://embedresponsively.com/

这是一个很棒的资源，而且效果很好，我有几次用过它。创建以下代码....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

http://embedresponsively.com/

This is a great resource and has worked very well, the few times I've used it. Creates the following code....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
回复 原文
魔 2024-11-12 05:44:32

对 Akshit Soota 的回答的补充：
显式设置每个父元素的高度很重要，还有表格和列（如果有）的高度：

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>

Additional to the answer of Akshit Soota:
it is importand to explicitly set the height of each parent element, also of the table and column if any:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
回复 原文
无需解释 2024-11-12 05:44:32

这是一个简洁的代码。它确实依赖于 jquery 方法来查找当前窗口高度。加载 iFrame 时，它​​将 iframe 的高度设置为与当前窗口相同。然后，为了处理页面大小的调整，body 标记有一个 onresize 事件处理程序，每当调整文档大小时，该处理程序都会设置 iframe 的高度。

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

这是一个工作示例： http://jsbin.com/soqeq/1/

Here is a concise code. It does relies on a jquery method to find the current window height. On load of iFrame it sets the height of the iframe be the same as the current window. Then to handle resizing of the page, the body tag has an onresize event handler which sets the iframe's height whenever the document is resized.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

here's a working sample: http://jsbin.com/soqeq/1/

回复 原文
不语却知心 2024-11-12 05:44:32

如果您的父

使用此处提到的多重解决方案填充高度。

然后你也可以使用类似的东西

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>

if your parent <div> fill the height with the multiple solution mentionned here.

Then you could also use something like

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>
回复 原文
柠栀 2024-11-12 05:44:32

另一种构建流畅的全屏 iframe 的方法：

页面加载时嵌入视频填充整个 viewport 区域

对于包含视频或任何嵌入内容的登陆页面来说，这是一个很好的方法。您可以在嵌入视频下方添加任何其他内容，向下滚动页面时会显示这些内容。

示例：

CSS 和 HTML 代码。

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>

Another way to build fluid full screen iframe:

Embedded video fills entire viewport area when page loads

Nice approach for landing pages with video or any embedded content. You can have any additional content below of embedded video, which is revealed when scrolling page down.

Example:

CSS and HTML code.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>

回复 原文
昔日梦未散 2024-11-12 05:44:32

只有这对我有用（但对于“同域”）：

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

您可以使用：

MakeIframeFullHeight(document.getElementById("iframe_id"));

或

<iframe .... onload="MakeIframeFullHeight(this);" ....

Only this worked for me (but for "same-domain"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

you can use either:

MakeIframeFullHeight(document.getElementById("iframe_id"));

or

<iframe .... onload="MakeIframeFullHeight(this);" ....
回复 原文
深海少女心 2024-11-12 05:44:32

根据 https://developer.mozilla.org/en- US/docs/Web/HTML/Element/iframe，不再允许使用百分比值。
但以下内容对我有用

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

虽然 width:100% 有效，但 height:100% 不起作用。因此使用了window.innerHeight。您还可以使用 css 像素作为高度。

工作代码： 链接 工作站点：
链接

As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe, percentage values are no longer allowed.
But the following worked for me

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Though width:100% works, height:100% does not work. So window.innerHeight has been used. You can also use css pixels for height.

Working code: Link Working site:
Link

回复 原文
自控 2024-11-12 05:44:32

您可以调用一个函数，该函数将在加载 iframe 时计算 iframe 的主体高度：

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>

You can can call a function which will calculate the iframe's body hieght when the iframe is loaded:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
回复 原文
网白 2024-11-12 05:44:32

使用 jquery 尝试一下，

$('iframe').on('`enter code here`load', function(){
   $(this).css('height', $(this).contents().find('body').height());
});

Try this using jquery,

$('iframe').on('`enter code here`load', function(){
   $(this).css('height', $(this).contents().find('body').height());
});
回复 原文
~没有更多了~

关于作者

尾戒

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文