在另一个网页/ IFRAME脚本的div中显示内容

Question

I got 10 galleries, let's say gallery1.php, gallery2.php etc.

and I want to make a navigator, that whenever i press on "First Gallery" or "Secont Gallery" etc.

what it will do is only changing a content of a div or something else.

The galleries shows the images with for loop. basically, I rename all of the photos to series numbers and then use a for loop to print them one after another.

I tried using the IFRAME of HTML but when i tried to do a script that will set it's height to the content height, I faced a problem because the script didn't work on all the browsers. I Google for other scrips, and tried about 10 scripts by now, but none seems to work on all the browsers.

If you have a script that will work on all browsers, that would help.

If you don't, how do I change a div content to content from another webpage? Just consider that that content that i'm trying to pull from the other webpage, is a result of a For loop.

I really don't want to reload the whole page every time I choose another gallery.

Answer 1

You can achieve this with AJAX. Basically when you choose a new gallery, the JavaScript (recommended to use jQuery) will fetch the relevant PHP page and put it into the div, like so:

$.post('gallery1.php', function(data) {
  $('#the-div-id').html(data);
});

Answer 2

You can use AJAX to get content from server and insert into a page without reloading the whole page.

jQuery has numerous AJAX methods of which the simplest is load() .

Give your gallery links a common class:

<a class="gallery_link" href="gallery1.php">One</a>

Then in jQuery:

$(function(){    
    $('.gallery_link').click(function(){
      /* "this" inside click handler refers to link clicked*/
     var galleryUrl= this.href;
      $('#galleryDiv').load(galleryUrl, function(){
        /* new content is oaded into the DIV, can run any other code here that manages new content*/
      });
      /* prevent browser opening url in window*/
      return false;    
    })
});

API refernce: http://api.jquery.com/load/