JavaScript中的iframe是一种非常常见的HTML元素，它可以让我们在一个页面内嵌入另一个页面。在默认情况下，iframe的宽度是根据嵌入的页面的宽度而自适应的，但是我们有时候希望能够控制iframe的宽度来适应特定的布局效果或者需求。这篇文章将会介绍如何使用JavaScript来控制iframe的宽度。 首先，我们来看看如何在HTML代码中创建一个iframe元素。如下是一个简单的例子：

<iframe src="http://www.example.com"></iframe>

这个代码片段中的iframe元素将会加载http://www.example.com这个页面。如果我们不设置宽度，那么这个iframe元素就会根据页面的大小进行自适应。 但是如果我们需要控制iframe的宽度呢？我们可以在JavaScript代码中通过改变iframe元素的width属性来实现。下面是一个例子：

<iframe id="myIFrame" src="http://www.example.com"></iframe>
<script>
var myIFrame = document.getElementById("myIFrame");
myIFrame.width = "300px";
</script>

这个代码片段中，我们新增了一个id为myIFrame的iframe元素，并且通过JavaScript代码找到这个元素并且将它的宽度设置为300像素。 除此之外，我们还可以使用百分比来设置iframe的宽度。比如，如果我们需要让这个iframe元素的宽度占据父元素的一半，我们可以这样写：

<iframe id="myIFrame" src="http://www.example.com"></iframe>
<script>
var myIFrame = document.getElementById("myIFrame");
myIFrame.width = "50%";
</script>

这个代码片段中，我们将myIFrame的宽度设置为50%来适应父元素的大小。 除此之外，我们也可以通过计算获得iframe的宽度。比如，我们可以获得页面的宽度并且将这个宽度减去一个固定的值作为iframe的宽度。下面是一个例子：

<iframe id="myIFrame" src="http://www.example.com"></iframe>
<script>
var myIFrame = document.getElementById("myIFrame");
var pageWidth = window.innerWidth;
myIFrame.width = pageWidth - 100 + "px";
</script>

这个代码片段中，我们将页面的宽度赋值给一个变量pageWidth，然后将iframe元素的宽度设置成pageWidth减去100像素。这样即可让iframe元素适应页面的情况下稍微缩小一点。 总之，我们可以通过设置iframe元素的width属性来实现控制iframe宽度的目的。在实际应用中，我们根据需要选择不同的方法来设置iframe的宽度。