Was ist der richtige Weg, um mit getElementsByClassName über DOM-Elemente zu iterieren?

Question

Ich möchte, dass meine Benutzer Zugriff auf einen mobilen Emulator haben, damit sie die Reaktionsfähigkeit ihrer Website testen können. Ich verwende die Iframe-Methode wie responsinator Nach der Forschung here und here bin ich nicht so sicher, welche Route ich wählen sollte ... Ich versuche einen Code, der nicht funktioniert.

Formulareingabe

Enter the link of your website below 

      <form method="post" target="browser" style="padding-top:50px;"> 
<input id="txtUrl" style="width:60%; display:inline-block; margin-top:10px; height:100%;" placeholder="eg. http://www.google.com/" name="url" type="text" /> 
<input style="display:inline-block; height:100%; border-radius:45%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/> 
</form> 

Das mit nur einem iframe funktioniert:

<script type="text/javascript"> 
    function setBrowserFrameSource(){ 
     var browserFrame = document.getElementById("browser"); 
     browserFrame.src= document.getElementById("txtUrl").value; 
    } 
</script> 


<div id="iPhone5-portrait" class="device-block"> 
      <h5>iPhone 5 portrait · width: 320px</h5> 
      <iframe id="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe> 
      </div> 

Dies funktioniert nicht mit mehreren:

<script type="text/javascript"> 
    function setBrowserFrameSource(){ 
     var browserFrame = document.getElementsByClassName("browser"); 
     for(var i=0; i<browserFrame.length; i++) 
       { 
        alert(browserFrame[i].innerHTML); 
       } 
     browserFrame.src= document.getElementById("txtUrl").value; 
    } 
</script> 


    <div id="iPhone5-portrait" class="device-block"> 
      <h5>iPhone 5 portrait · width: 320px</h5> 
      <iframe class="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe> 
      </div> 

      <div id="iPhone5-landscape" class="device-block"> 
     <h5>iPhone 5 landscape · width: 568px</h5> 
      <iframe class="browser" name="browser" src="http://google.com" style="height:320px; width:568px"></iframe> 
      </div> 

Answer 1

Dies ist die Lösung:

for(var i=0; i<browserFrame.length; i++) { 
     alert(browserFrame[i].innerHTML); 
     browserFrame[i].src= document.getElementById("txtUrl").value; 
    }