Question

我有一个名为index.html的网页，它通过jQuery load（）方法连接到其他页面（portfolio.php，friendzone.php等）。

示例：我的菜单包含以下代码：

<a href="./" class="button"><div id="homepageBtn"></div></a>
<a onclick="showPage('progressi')" class="button"><div id="progressiBtn"></div></a>
<a onclick="showPage('interessi')" class="button"><div id="interessiBtn"></div></a>
<a onclick="showPage('friendzone')" class="button"><div id="friendzoneBtn"></div></a>
<a onclick="showPage('contact')" class="button"><div id="emailBtn"></div></a>

当我点击不是主页选项的内容时，会调用showPage（）函数：

function showPage(page) {
    $("#post-title").fadeOut (200, function() {
        $("#post-title").html(page); // Edit the page title in the div
        Cufon.refresh(); // I use Cufon plugin, so I reload it
    }).fadeIn(500);

    $("#post-content").fadeOut (200, function() {
        $("#post-content").load(page + ".php", function() { // If I pass for example "contact", it loads me the page contact.php in the "post-content" div
            $('a.boxed').colorbox({rel: 'Galleria'}); // I use colorbox jQuery plugin, so I reload it here
            $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"}); // Same here

        });
    }).fadeIn(500);
}

除了一件事之外，一切都完美无瑕：

当我在div中加载另一个页面内容时，URL不会更改。我相信对于Google抓取工具以及想要通过点击浏览器的后退按钮进入上一页的用户或分享指向我网站特定页面的链接的用户来说，这是非常糟糕的。

根据我在div中加载的内容，有什么方法可以实现不同的URL吗？

Answer 1

您可以在不更改实际页面网址的情况下修改浏览器网址，但我认为这不会影响抓取工具。您需要为机器人生成站点地图。设置Google网站管理员帐户并在那里提交您的站点地图。

Updating address bar with new URL without hash or reloading the page

window.history.pushState("object or string", "Title", "/new-url");

为什么不创建一个使用get变量重定向到主页的share.php？例如，在每个页面上都有一个“共享”按钮，链接到index.php？page = friendzone

当有人加载共享链接时，它将包含类似的内容。将其放在<head>标记中。

<? 
//Include this right before your end </head>.
if(isset($_GET['page']))
{
    ?>
    <script>
    $(function() {
        showPage('<? echo htmlentities($_GET['page']); ?>');
    });
    </script>
    <?
}
?>

然后您可以在showPage中执行以下操作：

if ( history.pushState ) history.pushState( {}, page, "/?page="+page );

Answer 2

尝试下面的代码吧。

         $.ajax
         ({
           type: "POST",
            url: 'Services/MyService.asmx/returnString2',
       dataType: "json",
           data: JSON.stringify({ fname: "yan" , lname: "key" }),
    contentType: "application/json; charset=utf-8",
          error: function (jqXHR, textStatus, errorThrown)   //what to do if fails
                 {
                   window.history.pushState("object or string", "Title", "/new-url");
                 },
        success: function (data)           //what to do if succedded
                 {
                   window.history.pushState("object or string", "Title", "/new-url");
                 }

}）;

在jQuery AJAX拉出后更新URL

2 个答案: