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