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中制作了这些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，您可以使用关联构建一个Object：

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

iframes在javascript中切换

1 个答案: