javascript - javascript 中的 iframe 切换

Question

我正在尝试在包含视频引用的 html 中切换 iframe。请帮我解决这个问题。实际上我想检查我通过文本区域传递的值，然后根据该值我想切换框架。

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中制作了这些iframe 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，而只需要一个。

<input  id=me type=text>
<iframe id=myIframe scrolling=no frameborder=0>Get a Browser</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];
};