Using select to open iframe

Asked

Viewed 1,138 times

3

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

I’ll paste the code so you can take a look:

<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/">opção2</option>
    </select>
</form>

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

  • You are checking whether the iframe src actually gets value when trying the second time?

2 answers

3


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 to this

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

1

You can do with Jquery:

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

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

Example

Browser other questions tagged html html5 select iframe

You are not signed in. Login or sign up in order to post.