CODEWITHSUNDEEP
javascriptjquery
123a
123a

Reputation: 21

How to move through different URLs in an iframe?

I have an iframe that shows the preview of a URL:

<iframe style="width:100%;height:700px;" id="myframe" src="www.google.com"></iframe>

However, I would like to have a list of URLs and be able to 'move' through them, meaning each time I press the space bar, it will show the next URL in the iframe:

<script>

    var websites = ["www.google.com", "www.bing.com", "www.yahoo.com", "www.youtube.com"];

    //Pressed spacebar
    $(window).keypress(function (e) {
        if (e.keyCode === 0 || e.keyCode === 32) {

        //Show next URL in iframe

        }
    })
</script>

Does anyone know how this can be added into this code? Thank you

Upvotes: 1

Views: 29

Answers (1)

JV Lobo
JV Lobo

Reputation: 6316

You can change the iframe src attribute iterating over your array of websites, like this:

var websites = ["http://www.google.com", "http://www.bing.com", "http://www.yahoo.com", "http://www.youtube.com"];
var counter = 1;

$(window).keypress(function (e) {
  if (e.keyCode === 0 || e.keyCode === 32) {
    $('#myframe').attr('src', websites[counter]);
    if(counter == websites.length -1) counter = 0;
    else counter += 1;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe style="width:100%;height:700px;" id="myframe" src="http://www.google.com"></iframe>

Upvotes: 1

Related Questions