Question

我希望页面上的某些部分保留（如页眉，页脚），并且只需更改主要内容。同时，URL也应根据新内容进行更改。

我知道所有关于AJAX / iframe但我不想使用它们，因为URL保持不变。

请123contactform.com查看。尝试使用左侧菜单，注意主要内容更改以及URL（标题，菜单，页脚保持不变）。

这是如何实现的？

感谢。

Answer 1

实际上，您提供的网页不仅会刷新其内容。它可能看起来像这样，但你可以看到标题仍然闪烁，也就是刷新（如果你改变内容，它会在点击链接时改变）

实际上有一个全新的页面。但他们使用模板来创建内容。

一个页面是一个模板网站，它调用网页的不同部分（即页脚，标题和内容）。内容可以根据给定的输入获得其他内容。

这可以用php完成。

<强>的template.php

include "header.php";

include $contentpage;

include "footer.php";

您在哪里提供要加载的不同内容文件名。

<强>的header.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
</head>
<body>
BLALBLA CONTENT

<强> content.php

echo $content;

<强> footer.php

</body>
</html>

这将共同创建一个页面，其中包含动态内容和静态页眉和页脚（您还可以在其中添加静态脚本）。

这只是关于如何实现这一目标的基本想法。

静态内容（页眉和页脚）也可以兑现，以便更快地加载它。

其他信息为什么我认为

此外，当您打开选项卡中的链接时，您将看到每个链接都包含标题。例如，与iFrame一样，只有动态内容才会显示在链接中。

Answer 2

您可以使用pushState和ajax执行此操作。看看pjax。

Answer 3

您可以使用jQuery load函数执行此操作。

Answer 4

我使用Firefox和Firebug.In Firebug在Net下测试指定的网站 - ＆gt;图像我们可以看到特定网页的所有下载图像。

当我点击左侧菜单时，它不会从服务器下载所有图像。例如，左上角的“123联系表格图像”和可爱的“注册山羊图像”在浏览时未从服务器下载通过不同的网页。

但是当我点击Ctrl + F5时，所有图像都从服务器下载。我认为他们正在使用缓存机制来实现这一功能。

在goggled中，我能够看到Zend框架提供了用于缓存网页日期的特殊API，您可以在以下链接中找到更多信息

http://framework.zend.com/manual/1.12/en/zend.cache.html Cache only part of a page in PHP

根据我的测试，我可以得出结论，这个功能是通过使用缓存机制实现的。

Answer 5

有很多方法可以做到这一点。

使用jQuery，您有$.load

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

如果数据更复杂，可以使用$.ajax

    $.ajax({
        type: 'GET',
        url: "http://www.somewhere.com/json",
        data:bcData,
        error: function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        success: function(data){
            var ul = $("<ul/>:);
            for (var i=0;i < data.items.length;i++){
                var li = $("<li/>",{"html":data[i].html});
                ul.append(li);
            }
            $("#someConainer").append(ul);

        }
    });

如果您的应用程序很复杂，我会考虑使用框架。

我喜欢http://angularjs.org/，但还有很多其他人。

Answer 6

您推荐给我们的网页只是一个普通的网站。您可以注意到，左侧栏中的链接将您带到另一页。主要内容是在包装器中，但页眉，页脚和其他所有内容都是相同的（大多数情况下）。这可以通过动态创建内容（使用PHP或其他Web开发语言）来实现。基本上你有一个大页面，其中包含更多的块或页面。其中一个是主列，它根据您提供的链接创建它的内容。您还可以使用.htaccess文件来创建重定向，以便更好地格式化您的链接。此外nkmol的答案几乎可以回答你的问题。

尝试研究网络开发框架，因为它们可以为您的问题提供更多信息。

看看这个： http://en.wikipedia.org/wiki/Web_template_system

Answer 7

在网站中，您已经指出它们实际上刷新了整个页面（您可以通过fiddler或其他工具验证这一点，以监控网络流量。）

关于你的问题，你可以简单地使用ajax并在你的回调中包含你想要设置的网址，然后你可以像javascript一样手动设置它：

window.history.replaceState(null, <name to appear in history>, <url>);

详细了解如何操纵历史here

Answer 8

尝试这样的事情

页眉，页脚和导航是不变的。只是内容不断改变。

的header.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        //css goes here

        <script  src="jquery.js"></script>
        ...
    </head>
    <body>
        <div style="float:left;width:40%;">
            <?php include 'left_nav.php';?>
        </div>
        <div style="float:right;width:60%;">

footer.php

        </div>
    </body>
</html>

left_nav.php

  <ul>
    <li><a href="sample1.php">A</a></li>
    <li><a href="sample2.php">B</a></li>
  </ul>

sample1.php

<?php include 'header.php';?>
    First page  Content A
<?php include 'footer.php';?>

sample2.php

<?php include 'header.php';?>
    Second page  Content B
<?php include 'footer.php';?>

Answer 9

您提供的示例很简单：

左侧菜单中的每一个都是新htm文件的锚点，因此URL更改。例如：

<div id="left" class="leftmenu">
                    <div class="menuitem"></div>

                    <div id="tour_tab_1" class="menuitem active" onclick="tour_show_tab(1);"><a href="/tour.html"><span class="sprite-left-menu sprite-left-menu-edit"></span>Build web forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>  

                    <div id="tour_tab_2" class="menuitem " onclick="tour_show_tab(2);"><a href="/styling-forms.htm"><span class="sprite-left-menu sprite-left-menu-themes"></span>Add branding</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>      

                    <div id="tour_tab_3" class="menuitem " onclick="tour_show_tab(3);"><a href="/mobile-web-forms.htm"><span class="sprite-left-menu sprite-left-menu-code"></span>Publish anywhere</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_4" class="menuitem " onclick="tour_show_tab(4);"><a href="/form-to-email-submissions.htm"><span class="sprite-left-menu sprite-left-menu-notif"></span>Get notifications</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_5" class="menuitem " onclick="tour_show_tab(5);"><a href="/online-database-forms.htm"><span class="sprite-left-menu sprite-left-menu-submissions"></span>Manage data</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_6" class="menuitem " onclick="tour_show_tab(8);"><a href="/apps-integrations.htm"><span class="sprite-left-menu sprite-left-menu-apps"></span>Add 3<sup>rd</sup> party apps</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_7" class="menuitem " onclick="tour_show_tab(7);"><a href="/purchase-order-forms.htm"><span class="sprite-left-menu sprite-left-menu-payments"></span>Accept payments</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_8" class="menuitem " onclick="tour_show_tab(6);"><a href="/conditional-logic-forms.htm"><span class="sprite-left-menu sprite-left-menu-rules"></span>Branch forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>     
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_9" class="menuitem " onclick="tour_show_tab(10);"><a href="/translate-forms.htm"><span class="sprite-left-menu sprite-left-menu-translations"></span>Go multilingual</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_10" class="menuitem " onclick="tour_show_tab(9);"><a href="/sub-users.htm"><span class="sprite-left-menu sprite-left-menu-users-pink"></span>Create subusers</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_11" class="menuitem " onclick="tour_show_tab(11);"><a href="/captcha-form-validation.htm"><span class="sprite-left-menu sprite-left-menu-security"></span>Stay secure</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div> 
                    <div class="menuitem separator"></div>

                </div>

然而，每个链接的页面都包含标题，左侧菜单和页脚等常用文件。单击的菜单将激活。

希望它有所帮助！：）

Answer 10

所以问题是你要加载这个内容，但你不想刷新页面。

你不想使用Ajax，（老实说这可能是你应该这样做的最佳方式。）并且您不希望页面再次加载。

如果您正在使用MVC构建它，那么建议的路线将采用上述答案的方式。添加PHP包括保留页眉和页脚。

但如果你真的坚持不使用任何这些。

您可以将所有内容放在同一页面上，并从头开始隐藏它们。并使用左侧的菜单项，根据您的选择使用javascript显示或隐藏正确的菜单项。

如果没有MVC，AJAX或页面重新加载，这是你唯一的方法。
非常不推荐。但是，会做这个工作......

Answer 11

忽略给定的例子是2倍。 获取内容和更新网址栏

1）获取没有页面刷新的内容

使用jQuery，您可以将内容加载到页面的主要区域，正如许多其他答案所述。

最简单的

$( "#result" ).load(url);

2）更改网址。

注意：使用散列（＃）以外的任何内容表示重新加载页面。

使用hashchange jQuery插件（https://github.com/cowboy/jquery-hashchange）或jQuery Address插件（http://www.asual.com/jquery/address/）允许您使用该哈希来检测它何时更改并轻松执行操作。

有关历史插件的更多讨论，请参阅：The best Ajax History and Bookmark plugin currently available

全部放在一起

有jQuery BBQ（http://benalman.com/projects/jquery-bbq-plugin/）

在此示例（http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/）中，您可以看到内容是从只包含与选项卡关联的图像和文本的小html文件加载的 tab example area

如何使用新网址刷新部分内容？

11 个答案:

1）获取没有页面刷新的内容

2）更改网址。

全部放在一起