如何在 JavaScript 中设置高度为 100% 的全屏 iframe？

给定一个包含元素的 HTML 文档，任务是在 JavaScript 的帮助下将 <iframe> 元素的高度更改为 100%。有两种方法可以改变 iframe 的高度，下面讨论：</p><p><strong>方法一：</strong>该方法使用 iframe 的 id 属性和 height 属性来改变 <iframe> 元素的高度。 JavaScript 代码写在 <script> 标记内。 </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><html> <head> <title> How to change the height of an iframe to 100% with JavaScript? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to change the height of a <iframe id="iframe" width="100%" height="40%" src="https://www.youtube.com/embed/hjGD08xfg9c" frameborder="0" allowfullscreen> to 100% with JavaScript?

输出：

在点击按钮之前：
点击按钮后：

方法2：该方法使用带有window.innerHeight 属性的iframe 的id 属性来改变元素的高度。 JavaScript 代码写在<strong><script></strong>标记内。 </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><html> <head> <title> How to change the height of an iframe to 100% with JavaScript? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to change the height of a <iframe id="iframe" width="100%" src= "https://www.youtube.com/embed/hjGD08xfg9c" frameborder="0" > to 100% with JavaScript?