Javascript 高度为 100% 的全屏 iframe

Question

提问by testndtv

Is iframe height=100% supported in all browsers?

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

I am using doctype as:

我使用 doctype 作为：

<!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 代码中，如果我说：

<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) ?

我的意思是它实际上会占用剩余页面的高度（因为顶部有另一个固定高度为 50px 的框架）所有主要浏览器（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?

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

Answer 1

回答by Axe

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

您可以使用框架集作为先前的答案状态，但如果您坚持使用 iFrames，则以下 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>

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:

要使用 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>

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: hiddento 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!

为了隐藏 iFrame 的滚动条，父级被设置overflow: hidden为隐藏滚动条，并且 iFrame 被设置为 150% 的宽度和高度，这迫使滚动条在页面之外，因为主体没有滚动条人们可能不希望 iframe 超出页面的边界。这会隐藏全宽 iFrame 的滚动条！

Answer 2

回答by Josh Crozier

3 approaches for creating a fullscreen `iframe`:

创建全屏的 3 种方法`iframe`：

Approach 1 - Viewport-percentage lengths

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

Where 100vhrepresents the height of the viewport, and likewise 100vwrepresents 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>

方法 1 -视口百分比长度

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

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

示例在这里

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 fixedelement and add a height/widthof 100%.

Example Here

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

<iframe></iframe>

方法 2 - 固定定位

这种方法相当直接。只需设置的定位fixed元素，并添加height/width的100%。

示例在这里

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 heightof the body/html/iframeelements 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>

方法三

对于这最后的方法，只设置height了的body/ html/iframe元素100%。

示例在这里

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>

Answer 3

回答by Rudie

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:

1. 将您的 DOCTYPE 更改为不那么严格的内容。不要使用 XHTML；这很愚蠢。只需使用 HTML 5 doctype 就可以了：

<!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:

2. 您可能需要确保（取决于浏览器）iframe 的父级具有高度。和它的父母。和它的父母。等等：

html, body { height: 100%; }

Answer 4

回答by NotJay

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

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

<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).

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

Answer 5

回答by Ivan

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

这对我来说非常有效（仅当 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>

Answer 6

回答by khoa

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>

Answer 7

回答by Heitor Giacomini

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

Answer 8

回答by Uma Shankar Goel

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>

Answer 9

回答by Brabbeldas

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

除了 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>

Answer 10

回答by Tariq Javed

You first add css

你先添加css

html,body{
height:100%;
}

This will be the html:

这将是 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>

Javascript 高度为 100% 的全屏 iframe

提问by testndtv

回答by Axe

回答by Josh Crozier

3 approaches for creating a fullscreen `iframe`:

创建全屏的 3 种方法`iframe`：

Approach 1 - Viewport-percentage lengths

方法 1 -视口百分比长度

Approach 2 - Fixed positioning

方法 2 - 固定定位

Approach 3

方法三

回答by Rudie

回答by NotJay

回答by Ivan

回答by khoa

回答by Heitor Giacomini

回答by Uma Shankar Goel

回答by Brabbeldas

回答by Tariq Javed

相关推荐

最近更新

标签

Javascript 高度为 100% 的全屏 iframe

提问by testndtv

回答by Axe

回答by Josh Crozier

3 approaches for creating a fullscreen iframe:

创建全屏的 3 种方法iframe：

Approach 1 - Viewport-percentage lengths

方法 1 -视口百分比长度

Approach 2 - Fixed positioning

方法 2 - 固定定位

Approach 3

方法三

回答by Rudie

回答by NotJay

回答by Ivan

回答by khoa

回答by Heitor Giacomini

回答by Uma Shankar Goel

回答by Brabbeldas

回答by Tariq Javed

相关推荐

Javascript 如何获取当前 Vue 组件的 DOM 元素？

Javascript 获取对象中数组的大小

Javascript 将 JSON 字符串发布到 WEB API

Javascript 如何判断一个javascript变量是否是一个函数

相关推荐

最近更新

标签

3 approaches for creating a fullscreen `iframe`:

创建全屏的 3 种方法`iframe`：