如何在JavaScript中设置具有100%高度的全屏iframe

使用style.height属性可以设置具有100％高度的全屏iframe，并返回字符串值，表示元素的高度。auto是这些高度属性的默认值。在这里，我们使用onclick事件在点击按钮后生效。

onclick事件仅在用户点击元素时发生，并且它是一个纯JavaScript属性。每当您点击onclick事件时，它会执行某些操作，例如显示消息或将用户重定向到另一页。在网站上应该尽量少使用onclick事件，因为它可能会给用户带来困惑。因此，要明智地使用这些事件。

getElementById()产生一个表示其id属性与提供的字符串匹配的元素的对象。因为元素ID必须是唯一的（如果提供），所以它们是快速检索单个元素的便捷方法。

在本文中，我们将学习如何使用JavaScript设置具有100％高度的全屏iframe。

语法

以下是使用JavaScript在点击按钮后设置具有100％高度的全屏iframe的语法：

document.getElementById('id').style.backgroundColor = 'auto | length | %| initial | inherit';

参数

height - 用于设置或返回元素的高度
getElementById - 用于读取和编辑特定的 HTML 元素
Length - 定义长度单位中的高度
% - 用于以父元素的百分比来定义高度

步骤

按照以下步骤，在 JavaScript 中点击按钮后设置全屏 iframe 的高度为 100%：

步骤 1 - 在 body 部分下，定义标题、iframe、按钮和脚本元素。

步骤 2 - 定义 HTML 文档的 iframe id 的样式，即在点击按钮后将为 iframe 设置高度。对于 iframe 元素，我们定义了高度和宽度。

步骤 3 - 对于按钮元素，定义了 heightChanging() 方法。使用该方法可以在按下按钮时更改高度。

步骤 4 - 在 heightChanging() 方法中，明确提到了要执行方法功能的 id 和高度。

步骤 5 - style.height 是用于设置 iframe 高度的 HTML DOM 样式属性。

步骤 6 - 点击按钮后，onClick 事件函数被触发，并将高度更改为 100%。

示例

在此示例中，我们将使用 JavaScript 在点击按钮后设置全屏 iframe 的高度为 100%。

<html>
   <body> 
      <h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
      <iframe id="iframe" width="650" height="315" src="https://www.youtube.com/embed/B8VDIyNX4Ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <br><br>
      <button onclick ="heightChanging()">
         Press Here to Change
      </button>
      <script>
         //function to change the height of iframe using the Javascript 
         function heightChanging() {
            var video = document.getElementById('iframe');
            video.style.height = window.innerHeight;
         }
      </script>
   </body>
</html>

示例

在这个示例中，我们使用style height属性将iframe的高度设置为100%。为了使更改生效，我们使用onclick事件属性和querySelector方法。

<html>
   <body>
      <h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/K5mgs1f-TFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <br><br>
      <button onclick ="heightChange()">
         Click Here to Change Height
      </button>

      <script>
         //function to change the height of iframe using the Javascript 
         function heightChange() {
            document.querySelector('iframe').style.width = "100%";
            document.querySelector('iframe').style.height = "100%";
            document.querySelector('iframe').style.top = "0";
            document.querySelector('iframe').style.left = "0";
            document.querySelector('iframe').style.position = "fixed";
            document.querySelector('iframe').style.zIndex = "8888";
         }
      </script> 
   </body> 
</html>

在上面的示例中，我们使用了“querySelector”来设置HTML文档中iframe的所有元素。getElementById()和Document.querySelector()仅适用于全局文档对象。为了给网页添加功能，我们使用了JavaScript代码。在这种情况下，我们使用了带有”id”参数的箭头函数。我们还可以使用样式属性将iframe的高度设置为100%。这些都是简单易用的方法，我们用一个样式示例来展示所有的代码。