使用javascript的iframe src选择菜单 [英] selection menu for iframe src using javascript

问题描述

我找到了如何使用JavaScript更改iframe src的方法，但是当我进行选择菜单以允许您选择要加载的网址时，即使您选择了其他菜单，它也只会加载菜单中的第一个选项网址.我让它可以工作一次，但是我做了一些更改，并且不能让我一路撤消.这就是我所拥有的:

I found out how to use javascript to change the iframe src, but when I made a selection menu that allows you to choose the url to load in, it only loads the first option in the menu, even when you select a different url. I got it to work once, but I made a few changes and it wouldn't let me go all the way back with undo. Here's what I've got:

<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe>
<div>
  <select id="selected2">
    <option value="http://linux.com">1</option>
    <option value="http://microsoft.com">2</option>
    <option value="http://apple.com">3</option>
  </select>
  <button onclick="loadPages()">Click Me</button>
  <script>
    function loadPages() {
      var loc = dataCap;
      document.getElementById('myFrame').setAttribute('src', loc);
    }
    var dataCap = document.getElementById("selected2").value;
  </script>

推荐答案

问题是，当脚本执行时，您只是在第一次获得该值.为了获得当前选择的值，您需要在 onclick 函数内部单击按钮时正确获得该值.

The thing is that you're only getting the value the first time around, when your script executes. In order to get the currently selected value, you need to get the value right when you click the button, inside of the onclick function.

http://jsfiddle.net/v74ypgwk/1/

<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe>
<div>
<select id="selected2">
    <option value="http://linux.com">1</option>
    <option value="http://microsoft.com">2</option>
    <option value="http://apple.com">3</option>
</select>
<button onclick="loadPages()">Click Me</button>
<script>
var urlSelect = document.getElementById('selected2'),
    myFrame = document.getElementById('myFrame');
function loadPages() {
    var loc = urlSelect.value;
    // You can also do -> myFrame.src = loc;
    myFrame.setAttribute('src', loc);
}
</script>

这篇关于使用javascript的iframe src选择菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！