Javascript 更改inframe标记中的url_Javascript_Html

Javascript 更改inframe标记中的url

javascript html

Javascript 更改inframe标记中的url,javascript,html,Javascript,Html,我有如下问题。我在我的网站中嵌入了一个带有inframre标签的图表。我的网站有一个选项标签。当选择选项2时，如何将iframe中的url 1更改为url2；当选择选项3时，如何将url3更改为url2。如果能找到解决办法，我们将不胜感激。例如： <iframe src="url1"></iframe> <select id "select"> <option value="1">1</option>

我有如下问题。我在我的网站中嵌入了一个带有inframre标签的图表。我的网站有一个选项标签。当选择选项2时，如何将iframe中的url 1更改为url2；当选择选项3时，如何将url3更改为url2。如果能找到解决办法，我们将不胜感激。例如：

  <iframe src="url1"></iframe>
    <select id "select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>


1.
2.
3.
4.

我找到了一个非常简单的解决方案。这是我的解决方案

<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
    var tuyencap = document.getElementById("tuyencap").value;
  alert(tuyencap)
   if (tuyencap ==1){
       document.getElementById('urlFrame').src="url1";
       }
    else if (tuyencap ==2){
         document.getElementById('urlFrame').src="url2";

        }
   else if (tuyencap ==3){
         document.getElementById('urlFrame').src="url3";

        }
   else if (tuyencap ==4){
         document.getElementById('urlFrame').src="url4";

        }
}
</script>


1.
2.
3.
4.
函数changeValue（）{
var tuyencap=document.getElementById（“tuyencap”）.value；
警报（tuyencap）
如果（tuyencap==1）{
document.getElementById（'urlFrame'）.src=“url1”；
}
否则如果（tuyencap==2）{
document.getElementById（'urlFrame'）.src=“url2”；
}
否则如果（tuyencap==3）{
document.getElementById（'urlFrame'）.src=“url3”；
}
否则如果（tuyencap==4）{
document.getElementById（'urlFrame'）.src=“url4”；
}
}

对

选择元素使用onchange

<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

注意
选项的值应为您打算使用的URL，而不是：
<option value="1">1</option>

__
编辑2
如@LelioFaieta所建议的，您可以使用数据。*
属性：
<option data-url="http://google.com" value="1">1</option>

对选择元素使用onchange

<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

注意
选项的值应为您打算使用的URL，而不是：
<option value="1">1</option>

__
编辑2
如@LelioFaieta所建议的，您可以使用数据。*
属性：
<option data-url="http://google.com" value="1">1</option>

您好，请检查下面的代码，它的工作绝对良好。您只需要根据您的要求更改路径
 <html>
 <head>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 </head>
     <iframe height="800px" width="800px" 
     src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg" 
     id="imageToSwap" class="profile"></iframe>
          <select onchange="$('#imageToSwap').attr('src', 
          this.options[this.selectedIndex].value);">
        <option value="http://cdns2.freepik.com/free-photo/facebook-
         logo_318-49940.jpg" selected>Facebook</option>
        <option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
        40459.jpg">Twitter</option>
    </select>


脸谱网
啁啾

您好，请检查下面的代码，它工作非常正常。您只需要根据您的要求更改路径
 <html>
 <head>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 </head>
     <iframe height="800px" width="800px" 
     src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg" 
     id="imageToSwap" class="profile"></iframe>
          <select onchange="$('#imageToSwap').attr('src', 
          this.options[this.selectedIndex].value);">
        <option value="http://cdns2.freepik.com/free-photo/facebook-
         logo_318-49940.jpg" selected>Facebook</option>
        <option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
        40459.jpg">Twitter</option>
    </select>


脸谱网
啁啾

如果需要，可以使用数据属性
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
  <option value="1" data-url="url1">1</option>
  <option value="2" data-url="url2">2</option>
  <option value="3" data-url="url3">3</option>
  <option value="4" data-url="url4">4</option>
</select>

function changeValue(){
   var x = document.getElementById("select");
   var myoption = x.options[x.selectedIndex];
   var urlSelect = myoption.dataset.addr;
   alert('urlSelect = '+urlSelect);
   document.getElementById('urlFrame').src = urlSelect;
}


1.
2.
3.
4.
函数changeValue（）{
var x=document.getElementById（“选择”）；
var myoption=x.options[x.selectedIndex]；
var urlSelect=myoption.dataset.addr；
警报（'urlSelect='+urlSelect）；
document.getElementById（'urlFrame'）。src=urlSelect；
}

dataset属性是从选项标记读取所有数据属性的属性
 如果需要，可以使用数据属性
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
  <option value="1" data-url="url1">1</option>
  <option value="2" data-url="url2">2</option>
  <option value="3" data-url="url3">3</option>
  <option value="4" data-url="url4">4</option>
</select>

function changeValue(){
   var x = document.getElementById("select");
   var myoption = x.options[x.selectedIndex];
   var urlSelect = myoption.dataset.addr;
   alert('urlSelect = '+urlSelect);
   document.getElementById('urlFrame').src = urlSelect;
}


1.
2.
3.
4.
函数changeValue（）{
var x=document.getElementById（“选择”）；
var myoption=x.options[x.selectedIndex]；
var urlSelect=myoption.dataset.addr；
警报（'urlSelect='+urlSelect）；
document.getElementById（'urlFrame'）。src=urlSelect；
}

dataset属性是从选项标记读取所有数据属性的属性
 你好。您必须编写您以前尝试过的代码，用户会告诉您代码不起作用的原因。当更改事件在您拥有的select上触发时，您必须编写一些javascript。您使用jquery吗？还是纯javascript？谢谢你的支持prompt@AliSheikhpour . 但我写这个问题是因为我没有解决这个问题的办法。请理解我的意思。@Lelio Faieta我在选择上更改事件时使用javascript。如果你需要我给你看代码如果你要我们帮你修改代码，你必须给我们看，不是吗？你好。您必须编写您以前尝试过的代码，用户会告诉您代码不起作用的原因。当更改事件在您拥有的select上触发时，您必须编写一些javascript。您使用jquery吗？还是纯javascript？谢谢你的支持prompt@AliSheikhpour . 但我写这个问题是因为我没有解决这个问题的办法。请理解我的意思。@Lelio Faieta我在选择上更改事件时使用javascript。如果你需要我给你看代码如果你要求我们帮你修复代码，你必须给我们看，不是吗？这一定行得通。我也提出同样的建议，并坚持在1Thanks中为您的解决方案定义URL，但我不能设置value=URL，因为该值也在另一个javascript中使用。是否有其他解决方案？对每个选项使用数据属性。类似于data url=“url1”@hungtrinh，您还可以使用innerHTML
。请参阅我的编辑。然而，使用innerHTML
不是很好的用户体验感谢您的解决方案，但ai无法设置google.com。因为该选项的名称是由值固定的，例如：沃尔沃萨博欧宝奥迪，所以该选项必须正常工作。我也提出同样的建议，并坚持在1Thanks中为您的解决方案定义URL，但我不能设置value=URL，因为该值也在另一个javascript中使用。是否有其他解决方案？对每个选项使用数据属性。类似于data url=“url1”@hungtrinh，您还可以使用innerHTML
。请参阅我的编辑。然而，使用innerHTML
不是很好的用户体验感谢您的解决方案，但ai无法设置google.com。因为期权的名称是由价值确定的，例如：沃尔沃萨博欧宝奥迪非常感谢您的解决方案Hi@roopesh。您的解决方案还使用value=url:（是的，因为我们使用选项列表，所以我们需要有值才能访问它。让我知道，您的确切想法。非常感谢您的解决方案Hi@roopesh。您的解决方案还使用value=url:（是的，当我们使用选项列表时，我们需要有值才能访问它。让我知道，您到底在想什么。快速提问：这意味着所选选项的数据
属性值将分配给父选择标记
？它的工作原理与值属性或任何其他数据-*完全相同。select将具有所选选项HI@LelioFaieta的值。感谢您的支持。这似乎是我所需要的。但我尝试了，但似乎不起作用。请查看我的错误。我在上面进行了编辑。@Lelio Faineta我添加了代码