getElementsByClassNameを使用してDOM要素を反復処理する適切な方法は何ですか？

Question

ユーザーがモバイルエミュレータにアクセスして、サイトの応答性をテストできるようにしたい。私はresponsinatorのようなiframeメソッドを使用しています。hereとhereを実行した後、どちらのルートを選択すべきかわかりません...私は動作しないコードを試しています。

フォーム入力

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> 

はこれが唯一のiframeで動作します。これは、複数では動作しません

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

：

<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

これが解決策です：

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