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中点击按钮后设置高度为100%的全屏iframe。

第1步 - 在body部分，我们定义了标题、iframe、按钮和脚本元素。

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

第3步 - 对于按钮元素，定义了heightChanging()方法。使用这个方法，当我们按下按钮时，高度将被改变。

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

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

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

例子

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

<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 “来设置HMTL文档中iframe的所有元素。getElementById()和Document.querySelector()只能在全局文档对象上访问。为了给网页添加功能，我们使用了JavaScript代码。在这种情况下，我们利用了带有 “id “参数的箭头函数。我们还可以使用样式属性将iframe的高度设置为100%。这些都是很容易使用的方法，我们用一个样式的例子来展示所有的代码。

总结

在这篇文章中，我们已经演示了如何设置高度为100%的全屏iframe，并附有实例。我们在这里看到了两个不同的例子，我们使用了style height属性来设置iframe的高度为100%。在第一个例子中，我们使用 “style height “属性来设置高度为100%的全屏iframe。在第二个例子中，我们使用style height属性和querySelector方法来设置高度、宽度、左边、上面等元素。