Url array - Next button

With Javascript, you can change src using the attr or prop to each button click event, like this:

HTML:

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

Javascript:

var urls = ['www.google.com.br','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: link

event.preventDefault () is a function to prevent default behavior of a given component, so if you the user no submit, the default behavior of refreshing the page will not happen.

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

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

<iframe id="rotator" src="http://www.1.com.br"width='100%'height='100%'></iframe><script>window.onload=function(){/*ParacapturaroelementoporgetElementById,independentedaposiçãodoscript,énecessárioqueodocumentowindowtenhasidolido*/varurls=['http://www.1.com.br','http://www.2.com.br','http://www.3.com.br'];varindex=1;varclick_button=document.getElementById('next');varel=document.getElementById('rotator');click_button.onclick=function(){if(index===urls.length){index=0;}el.src=urls[index];index+=1;}};</script>

IfyouwanttoimplementusingPHPdirectlyinjavascript,youcandothat,butIdonotrecommendit,prefertosendthedataviaPOSTorGET,butthatwouldbeforanotherquestion:

<?php$urls=array('http://www.1.com.br','http://www.2.com.br','http://www.3.com.br');?><script>window.onload=function(){/*ParacapturaroelementoporgetElementById,independentedaposiçãodoscript,énecessárioqueodocumentowindowtenhasidolido*/varurls=<?phpecho'["'.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 was not exactly clear what the problem was. Because it loads each iframe on the same page, if it's updating, it's not about the code I've posted, but the rest of the code that exists in your application, I think.

You can do 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 array again, with that array I make the exchange logic in the code below, according to the src value of the iframe I get find the index in the array and make it go to the next item, unless it is the last or does not exist, in that case I select the first item in the array.

NOTE: I am separating the URL by pipe, but you can switch to any character you do not have in your links.