Urls array - Next button

Question

PHP

$urls = Array('www.1.com.br','www.2.com.br', 'www.3.com.br');

HTML

<iframe src="www.1.com.br" width='100%' height='100%'></iframe>

<button>Proximo</button>

How do I always click the next button update only the iframe (not the entire page) in the sequence of urls that are in the php array?

I am also in doubt if it is better to have an array with all urls in javascript or php

UPDATE

1 - The 3 answers worked for me, but the 3 have a common one: when you arrive at the last url of the array, when you click again back to the first url, you should stop having action by clicking the Next button when you finish the array urls

2 - in the 3 examples the full page is updating when there is a change in the url of the iframe

jQuery('#srcFrame').submit(function(){             
           $.ajax({
            url: 'updateUrl.php',
            type: '???',
            data: ????,
        });     
    })

How do I use ajax for just iframe update and what should be the updateUrl.php file?

Answer 1

Capture the elements through the ID, and create an action on the button, checking which next index should be clicked, at each click, sum a position, if it is equal to the url total, it restarts to the index 0 (top):

<button id="next">Proximo</button>

<iframe id="rotator" src="http://www.1.com.br" width='100%' height='100%'></iframe>

<script>
window.onload = function() {
/* Para capturar o elemento por
   getElementById, independente da posição do script,
   é necessário que o documento window tenha sido lido */ 
    var urls = [
                'http://www.1.com.br',
                'http://www.2.com.br',
                'http://www.3.com.br'
        ];

    var index = 1;
    var click_button = document.getElementById('next');
    var el = document.getElementById('rotator');

    click_button.onclick = function() {
        if ( index === urls.length ) {
            index = 0;
        } 
        el.src = urls[index];
        index += 1;
    }
};
</script>

If you want to implement using PHP directly in javascript, can do so, but I do not recommend, prefer to send the data via POST or GET, but then would be for another question:

<?php $urls = array('http://www.1.com.br',
                    'http://www.2.com.br',
                    'http://www.3.com.br'); ?>
 <script>
    window.onload = function() {
    /* Para capturar o elemento por
       getElementById, independente da posição do script,
       é necessário que o documento window tenha sido lido */ 
        var urls = <?php echo '["'.implode('","', $urls).'"];'; ?>

        var index = 1;
        var click_button = document.getElementById('next');
        var el = document.getElementById('rotator');

        click_button.onclick = function() {
            if ( index === urls.length ) {
                index = 0;
            } 
            el.src = urls[index];
            index += 1;
        }
    };
</script>

Resolution for new cases:

Case 1:

   <script>
    window.onload = function() {
    /* Para capturar o elemento por
       getElementById, independente da posição do script,
       é necessário que o documento window tenha sido lido */ 
        var urls = [
                    'http://www.1.com.br',
                    'http://www.2.com.br',
                    'http://www.3.com.br'
            ];

        var index = 1;
        var click_button = document.getElementById('next');
        var el = document.getElementById('rotator');

        click_button.onclick = function() {
            if ( index === urls.length -1 ) {
               this.disabled = true;
            } 
            el.src = urls[index];
            index += 1;
        }
    };
    </script>

Case 2:

It wasn’t exactly clear what the problem was. Because it loads every iframe on the same page, if it’s updating, it has nothing to do with the code I published, but with the rest of the code that exists in your application, I believe.

Answer 2

With Javascript, you can change the src using the function attr or prop every event click the button, this way:

HTML:

<iframe id="frames" src="'www.google.com" width='100%' height='100%'></iframe>
<button>Proximo</button>

Javascript:

var urls = ['www.google.com','https://platform.twitter.com/widgets/tweet_button.html', 'www.globo.com.br'];
var frame = $("#frames");
var index = 0;

$("button").click(function(event){
    event.preventDefault();
    if (index < urls.length)
        index++;
    $("#frames").attr("src", urls[index]);
});

Jsfiddle: https://jsfiddle.net/lbclucascosta/rmoqa2c7/

Event.preventDefault() is a function that serves to prevent a default behavior of a particular component, so if you user in Submit, the default behavior of refreshing the page will not happen.

Answer 3

You can do it like this:

HTML:

<iframe id="displayURL" src="www.1.com.br" width='100%' height='100%'></iframe>

<button id="changeURL">Próximo</button>

Javascript:

var urls = "<?php echo implode('|', $urls) ?>".split('|');

$('#changeURL').click(function() {
    var i = urls.indexOf($('#displayURL').prop('src'));
    i = (i < 0) ? 0 : i+1;
    if(i <= urls.length-1) {
        $('#displayURL').prop('src', urls[i]);
    }
});

It transforms the PHP array into a string separating the elements by pipe, then javascript transforms this string into an array again, with this array I make the swap logic in the code below, according to the value of src of iframe I can find the index in the array and make it go to the next item, unless it is the last or does not exist, in which case I select the first item of the array.

OBS.: I’m separating the URL by pipe, but you can change to any character you don’t have in your links.