Using select to open iframe

Question

Using select to open iframe

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

I have a code and I want it to open a path in iframe when I click on a option of select . I was able to do this, however to change the option so that it opens something else in iframe I have to refresh the page. If I click on one and then want to switch to another it does not happen.

I'll paste the code for you guys to take a look at:

<form>
    <select name="Exames" onChange="abrir.location = options[selectedIndex].value">
        <option label="Selecione sua opção" value="0"></option>
        <option value="https://www.youtube.com/?gl=BR&hl=pt">opção1</option>
        <option value="https://www.google.com.br/">opção2</option>
    </select>
</form>

<iframe id="abrir" name="abrir" scrolling="auto" src=""></iframe>

html html5 select iframe

asked by anonymous 09.05.2014 / 16:23

2 answers

1

You can do with Jquery:

$('select').on('change',function(){
   var src = $(this).find('option:selected').val();
   $('#abrir').attr('src',src);
});

Attention: Some sites send "X-Frame-Options: SAMEORIGIN" as a response header, this prevents the browser from displaying iframes that are not hosted in the same domain as the parent page, in this case Youtube and Google, which you placed in select , will not open:

Example

09.05.2014 / 16:58

javascript, Label sum Updating treeview

score 3 · Accepted Answer

If you want to use jquery, assign an id to your select

$("#Exames").change(function(){ 
  var url = $(this).val();
  $("#abrir").attr("src",url); 
});

If you want pure javascript change it

onChange="document.getElementById('abrir').src = this.Exames[this.selectedIndex].value