Question

我希望我的用户可以访问移动模拟器，以便他们可以测试其网站的响应能力。我使用像responsinator这样的iframe方法做完研究后here和here我不太确定应该选择哪条路线...我是＆＃39; m尝试不起作用的代码。

表格输入

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

使用getElementsByClassName迭代DOM元素的正确方法是什么？

1 个答案: