如何使用JavaScript将iframe的宽度改为100%

在本文中，给出了一个包含<iframe>元素的HTML文档，并且任务是使用JavaScript将<iframe>元素的宽度改为100%。下面讨论了两种改变iframe宽度的方法：

方法1： 该方法使用iframe的id属性和width属性来改变<iframe>元素的宽度。JavaScript代码写在<script>标签中。

<!DOCTYPE html>
<html> 
    
<head> 
    <title> 
        如何使用JavaScript将iframe的宽度改为100%？ 
    </title> 
</head> 
     
<body> 
    <center>
        <h1 style="color:green;"> 
            GeeksforGeeks  
        </h1> 
        <h3> 
            如何使用JavaScript将iframe的宽度改为100%？ 
        </h3> 
        <iframe id="iframe" height="100%" width="40%"
            src="https://www.youtube.com/embed/HzeK7g8cD0Y"
            frameborder="0" allowfullscreen> 
        </iframe>
  
        <br><br> 
        <button onclick="changewidth()"> 
            点击改变 
        </button> 
          
        <script> 
  
            // JavaScript代码将iframe的宽度改为100% 
            function changewidth() { 
                var x = document.getElementById('iframe'); 
                x.style.width = "100%"; 
            } 
        </script> 
    </center>
</body>  
</html>

输出：

将iframe的宽度改为100%

方法2： 该方法使用iframe的id属性和window.innerWidth属性来改变<iframe>元素的宽度。JavaScript代码写在<script>标签中。

<!DOCTYPE html>
<html> 
<head> 
    <title> 
        如何使用JavaScript将iframe的宽度改为100%？ 
    </title> 
</head> 
     
<body> 
    <center>
        <h1 style="color:green;"> 
            GeeksforGeeks  
        </h1> 
        <h3> 
            如何使用JavaScript将iframe的宽度改为100%？ 
        </h3> 
        <iframe id="iframe" height="100%" width="40%"
            src="https://www.youtube.com/embed/HzeK7g8cD0Y"
            frameborder="0" allowfullscreen> 
        </iframe>
  
        <br><br> 
        <button onclick="changewidth()"> 
            点击改变 
        </button> 
          
        <script> 
            // JavaScript代码将iframe的宽度改为100% 
            function changewidth() { 
                var x = document.getElementById('iframe'); 
                x.style.width = window.innerWidth; 
            } 
        </script> 
    </center>
</body>  
</html>

输出：

如何使用JavaScript将iframe的宽度改为100%