显示来自另一个网页/ IFRAME脚本的内容

Showing content in a div from another webpage / IFRAME script

本文关键字:脚本 IFRAME 另一个 网页 显示      更新时间:2023-09-26

我有10个画廊,比如gallery1.php, gallery2.php等等

,我想做一个导航器,每当我按下"第一图库"或"第二图库"等

它所做的只是改变div的内容或其他内容。

图库显示带有for循环的图像。基本上,我将所有照片重命名为系列编号,然后使用for循环将它们一个接一个地打印出来。

我尝试使用HTML的IFRAME,但当我试图做一个脚本,将它的高度设置为内容的高度,我面临一个问题,因为脚本没有在所有的浏览器上工作。我谷歌其他脚本,并尝试了大约10个脚本到现在,但似乎没有工作在所有的浏览器。

如果你有一个可以在所有浏览器上运行的脚本,那将会很有帮助。

如果你不这样做,我如何改变一个div内容从另一个网页的内容?只要考虑一下,我试图从其他网页拉的内容,是一个For循环的结果。

我真的不想每次选择另一个图库时都重新加载整个页面。

您可以使用AJAX从服务器获取内容并插入到页面中,而无需重新加载整个页面。

jQuery有许多AJAX方法,其中最简单的是load()

给你的图库链接一个通用的类:

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

然后在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参考:http://api.jquery.com/load/

您可以使用AJAX实现这一点。基本上,当您选择一个新的图库时,JavaScript(建议使用jQuery)将获取相关的PHP页面并将其放入div中,如下所示:

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