Question

我可以通过“按钮”点击非常轻松地更改iframe的来源。但无论我尝试什么，我都无法通过使用下拉列表来实现同样的目标。

这有效：

<html>
<body>

<a href="google.com" target="iframe">google</a>

<iframe name="iframe" src="yahoo.ca"></iframe>

</body>
</html>

但这不是：

<html>
<body>
<form name="change">
<select name="options" target="iframe">
<option><a href="google.com" target="iframe">google</a></option>
</select>
</form>

<iframe name="iframe" src="yahoo.ca"></iframe>

</body>
</html>

任何建议都将不胜感激。我发现其他帖子类似，但都涉及使用数组 - 我不相信我应该需要它？

Answer 1

您需要使用JavaScript

<html>
<body>
<form name="change">
<SELECT NAME="options" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value">
<option>choise</option>
<option value="http://microsoft.com">Microsoft</option>
</SELECT>

<iframe name="iframe" id="youriframe" src="yahoo.ca"></iframe>
</body>
</html>

Answer 2

实际上，我需要在下拉菜单更改时重新加载多个iframe（在dropdwon选择上有3个不同的iframe），所以我最终遇到了这个问题：

<html>
<head>
    <script>
        function setIframeSource() {
            // behavior of myIframe
            var theSelect = document.getElementById('location');
            var theIframe = document.getElementById('myIframe');
            var theUrl;
            theUrl = theSelect.options[theSelect.selectedIndex].value;
            theIframe.src = theUrl;

            // behavior of myIframe2
            var theSelect2 = document.getElementById('location');
            var theIframe2 = document.getElementById('myIframe2');
            var theUrl2;
            theUrl2 = theSelect2.options[theSelect2.selectedIndex].value;
            theIframe2.src = theUrl2;

            // behavior of myIframe3
            var theSelect3 = document.getElementById('location');
            var theIframe3 = document.getElementById('myIframe3');
            var theUrl3;
            theUrl3 = theSelect3.options[theSelect3.selectedIndex].value;
            theIframe3.src = theUrl3;
        }
    </script>
</head>
<body>
    <form id="form1" method="post">
       <label> Selecione a rede</label>
        <select id="location" onchange="setIframeSource()"> 
          <option value="http://example.com/">Example.com</option> 
          <option value="https://www.dell.com/">DELL</option> 
          <option value="https://www.americanas.com.br/">AMERICANAS</option> 
          <option value="https://www.bbc.com/">BBC</option> 
       </select>
    </form>
    <iframe id="myIframe" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
        <br><br><hr/>
    <iframe id="myIframe2" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
        <br><br><hr/>
    <iframe id="myIframe3" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
    </body>
</html>

Answer 3

我使用了这个参考和另一个参考，并附带了这个工作示例：

<html>
<head>
    <script type="text/javascript">
        function setIframeSource() {
            var theSelect = document.getElementById('location');
            var theIframe = document.getElementById('myIframe');
            var theUrl;

            theUrl = theSelect.options[theSelect.selectedIndex].value;
            theIframe.src = theUrl;
        }
    </script>
</head>
<body>
<form id="form1" method="post">
   <label> Selecione a rede</label>

    <select id="location" onchange="setIframeSource()"> 
      <option value="https://www.dell.com/">CNN</option> 
      <option value="https://www.americanas.com.br/">AMERICANAS</option> 
      <option value="https://www.bbc.com/">BBC</option> 
   </select>
</form>

<iframe id="myIframe" src="https://www.bbc.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="400"></iframe>

</body>
</html>

更改iframe src onchange of dropdown value

3 个答案: