Javascript 自动调整两个iFrame的大小？

基本上，当我使用一个iframe时，它工作得很好，下面是代码：

<iframe id="iframe1" src="https://www.mywebsite.com/iframed" scrolling="no"></iframe> 
    
    
<script>
// Selecting the iframe element
var iframe = document.getElementById("iframe1");
// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
     

//选择iframe元素
var iframe=document.getElementById（“iframe1”）；
//调整iframe height onload事件
iframe.onload=函数（）{
iframe.style.height=iframe.contentWindow.document.body.scrollHeight+'px'；
}

我似乎无法对两个iFrame进行自动调整

我试过这个：

<iframe id="iframe1" src="https://www.mywebsite.com/iframed" scrolling="no"></iframe> 
<iframe id="iframe1" src="https://www.mywebsite.com/iframednr2" scrolling="no"></iframe> 

<script>
// Selecting the iframe element
var iframe = document.getElementById("iframe1");
// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

//选择iframe元素
var iframe=document.getElementById（“iframe1”）；
//调整iframe height onload事件
iframe.onload=函数（）{
iframe.style.height=iframe.contentWindow.document.body.scrollHeight+'px'；
}

这将仅对第一个iframe应用自动调整

我还尝试为两个iFrame添加两个脚本：

<iframe id="iframe1" src="https://www.mywebsite.com/iframed" scrolling="no"></iframe> 
<iframe id="iframe2" src="https://www.mywebsite.com/iframednr2" scrolling="no"></iframe> 

<script>
// Selecting the iframe element
var iframe = document.getElementById("iframe1");
// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

<script>
// Selecting the iframe element
var iframe = document.getElementById("iframe2");
// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

//选择iframe元素
var iframe=document.getElementById（“iframe1”）；
//调整iframe height onload事件
iframe.onload=函数（）{
iframe.style.height=iframe.contentWindow.document.body.scrollHeight+'px'；
}
//选择iframe元素
var iframe=document.getElementById（“iframe2”）；
//调整iframe height onload事件
iframe.onload=函数（）{
iframe.style.height=iframe.contentWindow.document.body.scrollHeight+'px'；
}

以上仅适用于iframe2，但不适用于iframe1

我不知道这里发生了什么

也许我错过了什么

---

需要帮助。

在第一个修复中，这是因为您使用ID

iframe1

设置了2个元素，HTML不允许这样做

在第二个修复中，您没有使用2个变量，而只使用了

iframe

，因此，它被重写了。要解决这个问题，请尝试使用两个单独的变量。（例如

iframe1

和

iframe2

）

以下是包含两个不同变量的示例：

//选择iframe元素
var iframe1=document.getElementById（“iframe1”）；
//调整iframe height onload事件
iframe1.onload=函数（）{
iframe1.style.height=iframe1.contentWindow.document.body.scrollHeight+'px'；
}
//选择iframe元素
var iframe2=document.getElementById（“iframe2”）；
//调整iframe height onload事件
iframe2.onload=函数（）{
iframe2.style.height=iframe2.contentWindow.document.body.scrollHeight+'px'；
}

工作得很有魅力！谢谢