在JavaScript中切换iframes

Question

我想切换包含视频引用的html中的iframe。请帮助我。其实我想检查我通过textarea通过的值，然后根据该值我想切换帧。

HTML

<iframe id="i1" name="iframeswitch" src="nice-to-meet-you.html" style="float: left; 
position:relative; 
height:350px; 
width:500px; 
margin-left:-25px;" 
     scrolling="no" frameborder="0"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 

<iframe id="i3" name="iframeswitch" src="your-name.html" style="float: left; 
position:relative; 
height:350px; 
width:500px; 
margin-left:-25px;" 
     scrolling="no" frameborder="0"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 
<iframe id="i2" name="iframeswitch" src="deaf-you.html" style="float: left; 
position:relative; 
height:350px; 
width:500px; 
margin-left:-25px;" 
     scrolling="no" frameborder="0"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 
<iframe id="i4" name="iframeswitch" src="you-work-where.html" style="float: left; 
position:relative; 
height:350px; 
width:500px; 
margin-left:-25px;" 
     scrolling="no" frameborder="0"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 

我在CSS使这些I帧display:none;。我希望它们能够显示在名为virtual的div中。 的JavaScript

<script> 
    function myFunction() { 
     var text=document.getElementById('me').value; 
     if(text="nice to meet you") 
     { 
      document.getElementById('i1').style.display="block"; 

     } 
     else if(text="are you deaf") 
     { 
      document.getElementById('i2').style.display="block"; 

     } 
     else if(text="what is your name") 
     { 
      document.getElementById('i3').style.display="block"; 

     } 
     else if(text="where you work") 
     { 
      document.getElementById('i4').style.display="block"; 

     } 
     else 
     {} 
    } 

</script> 

Answer 1

你的代码是一个很好的例子，为什么不使用内联CSS，想象有一天你发现你的iframe应该width:600px;，而不是500 ......苛刻的时间。

你不需要4个以上的iframe，但只有一个。

CSS：

#myIframe { 

    float  : left; 
    position : relative; 
    height  : 350px; 
    width  : 500px; 
    margin-left : -25px; 

} 

现在，只有一个iframe中，你可以与你的协会建立一个对象：

var text2src = { 
    "nice to..." : "nice.html", 
    "want some" : "want.html", 
    "good night" : "night.html" 
}; 

和输入的变化，你可以不是修改IFRAME SRC ：

var me = document.getElementById("me"); 
var ifr = document.getElementById("myIframe"); 
me.oninput = function(){ 
    var val = this.value.toLowerCase(); 
    if(text2src.hasOwnProperty(val)) ifr.src = text2src[val]; 
};