Question

这是我的html（index.php）：

<html>
<head>
     <script type="text/javascript" src="sunto.js"> </script>

    <link id="style" rel="stylesheet" type="text/css" title="other" href="styles.css">

    <meta property="og:image" content="http://www.sunto.no/images/olive-141471_640.jpg"/>
    <meta property="og:image" content="http://www.sunto.no/images/4130972679_c7c347959e_z.jpg"/>

    <meta property="og:description" content="Sunto, Opplysningstjenesten din for mat">
    <meta property="og:title" content="Sunto">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.sunto.no">
    </head>
    <body>


//this is my main menu //

<ul>
<li><a href="#page1" onclick="food('page1.php')">Page 1</a></li> 
<li><a href="#page2" onclick="food('page2.php')">Page 2</a></li>
<li><a href="#page3" onclick="food('page3.php')">Page 3</a></li>
</ul>
<div id="text">her is changing text content</div>
</body>

这是第二个html（page1.php）： //这是我的主菜单//

<ul>
<li><a href="#page1" onclick="food('page1.php')">Page 1</a></li> 
<li><a href="#page2" onclick="food('page2.php')">Page 2</a></li>
<li><a href="#page3" onclick="food('page3.php')">Page 3</a></li>
</ul>
<ul>
<li><a href="#Eco-food" onclick="food('Eco-food.php')">Eco-food</a></li>

//这是一个问题//

<li><a href="#Other-food" onclick="food('Other-food.php')">Other-food</a></li>
</ul>
<div id="text">her is changing text content</div> //

这是我的Ajax，sunto.js：

function food(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} 
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('text').innerHTML=xmlhttp.responseText;
}
}  
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

主菜单工作正常，这有html，并且可以重新加载，第2页可以直接导航到url-bar。两个菜单都使用ajax加载，并具有相同的主函数名称;食物（这里有不同的页面）。我的第二个菜单是文本文件，只包含div = text的文本。是否有可能拥有这样的代码，并能够通过网址栏导航到生态食品或其他食物？使用后退按钮前后移动，仅适用于第1-3页，而不适用于我的文本文件。我想我试图将我的html保存在尽可能少的页面中，并且仍然有优势，如果我将所有文本文件更改为html页面，我会这样做吗？

Answer 1

您必须使用URL哈希，并使用javascript来解释它们并加载正确的ajax资源。

由于你已经使用哈希（例如＃page8），你已经完成了第一步。

第二步是你读取onload哈希并进行ajax调用。

function autoloadAjax(){
    var page = location.hash;
    pages(page.substring(1))
}

您需要子字符串，因为哈希包含前导＃。

您可以将该代码放在索引页面中。 /index.php#page8与/index.php相同，然后单击带有href＃page8的按钮。

如何让我的ajax / javascript / php页面可抓取，可共享和直接导航？

1 个答案: