Каков правильный способ перебора элементов DOM с помощью getElementsByClassName?

Question

Я хочу, чтобы мои пользователи имели доступ к мобильному эмулятору, чтобы они могли проверить отзывчивость своего сайта. Я использую метод iframe, например, responsinator. После исследования 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; 
    }