Автоматическая настройка размера для двух кадров iframe?

#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.

Я уже пробовал это:

 <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.

Я также попытался добавить два сценария для обоих фреймов:

 <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>
 

Вышесказанное относится только к iframe2, но не относится к iframe1

Понятия не имею, что здесь происходит.

Может быть, я что-то упускаю?

Нужна помощь.

Ответ №1:

В первом исправлении это связано с тем, что вы установили 2 элемента с идентификатором iframe1 , а HTML этого не позволяет.

Во втором исправлении вы использовали не 2 переменные, а только iframe , и из-за этого все было переписано. Чтобы исправить это, попробуйте использовать 2 отдельные переменные. (например iframe1 , и iframe2 )

Вот оно с 2 различными переменными:

 <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 iframe1 = document.getElementById("iframe1");
// Adjusting the iframe height onload event
iframe1.onload = function(){
    iframe1.style.height = iframe1.contentWindow.document.body.scrollHeight   'px';
}
</script>

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