How to Display Page Number for iFrame Pagination

Question

I have main page that includes iframe and pagination.

I want to display the page numbers of the iframe pages on the sidebar of main page (means, not in the iframe itself but in the page that contain the iframe)

Here is image that display what exactly i want it do:

I use that jquery code (Using jquery-1.9.1.js):

    <script>
  var locations = ["./pages/0.html","./pages/1.html", "./pages/2.html", "./pages/3.html","./pages/4.html"];
  var currentIndex = 0;
  var len = locations.length;
  $(document).ready(function(){
    $(':button').click(function() {
        currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : len - 1 : 
                currentIndex > 0 ? --currentIndex : 0;
        $('#zoome').attr('src', locations[currentIndex]);
    });
  });
</script>

I wonder what is the correct code to display the page numbers between the next and previous buttons?

Here is a live link: Coreneto

Answer 1

You can us this code to get the html

$('#iframe').load(function() {
    var src = $('#iframe').contents().find("html").html();
    alert(src);
});

You can also use this to get an element's specific value. You did not say where the pagination value is located but I assume it's in a div or something.

To get specific value

$('input:button[name=ButtonName]').click(function() {
    var name = $('iframe[name=IframeName]').contents().find('#ControlId').val();
});

EDIT-------------------------------- Because you have provided more information, this is my suggestion.

Create a counter label and place it in between the next and previous button.
With javascript increment the label amount when you click next and decrease when going previous.
Make a save guard that you have a min and max to back and forward with. This prevents on being on page -1 or a higher number than pages you are navigating to.