Ami*_*ari 5 javascript php ajax jquery angularjs
我想知道是否可以更改显示的网址，并据此更改页面的内容并使网址和页面内容对机器人友好（这意味着机器人实际上可以对它们进行索引）。
我已经尝试过使用AJAX动态加载数据并使用angularjs路由，但它们都不能被机器人索引。
漂亮的网址和查询字符串也不是我想要的，我正在寻找一种理论，可以在着陆时呈现数据并更改路线和点击链接时的内容，而无需刷新页面，我不想写代码两次（一次在服务器端，一次在前端）。
这些是我已经尝试过的事情，任何对解决方案的帮助或指导将不胜感激。
更新
一个适用于所有语言且没有依赖性的无库解决方案/结构将是最准确的答案！
这是可以代表解决方案的起点的东西。在继续阅读我的回答之前，请记住以下主要事项：
但请注意，所有内容都在草稿代码中呈现，旨在解释解决方案，如果您想在生产中实现它，则需要改进代码。
让我们从索引页开始。
索引.php
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<meta charset="UTF-8">
<script type="text/javascript" src="ajax_loader.js"></script>
</head>
<body>
<h1>Some static content</h1>
<a href="?main_content=external_content.php">
Link to load dynamic content
</a>
<div id="main_content">
<!--
Here is where your dynamic content will be loaded.
You can have as many dynamic container as you like.
In my basic example you can attach one link to a
single container but you can implement a more
complete solution to handle multiple containers
at the same time
-->
<!-- Leave this empty for the moment... some php will follow -->
</div>
</body>
</html>
现在让我们看看 javascript 如何处理使用 ajax 加载内容的链接
ajax_loader.js
window.onload = function() {
var load = function(e) {
// prevent browser to load link
event.preventDefault();
// exit if target is undefined
if(typeof(e.target) == 'undefined' ) {return;}
// exit if clicked element is not a link
if (e.target.tagName !== 'A') {return;}
// get href from clicked element
var href = e.target.getAttribute("href");
// retrieve container and source
var href_parts = href.split('=');
var container = href_parts[0].substr(1);
var source = href_parts[1];
// instantiate a new request
var request = new XMLHttpRequest();
// bind a function to handle request status
request.onreadystatechange = function() {
if(request.readyState < 4) {
// handle preload
return;
}
if(request.status !== 200) {
// handle error
return;
}
if(request.readyState === 4) {
// handle successful request
successCallback();
}
};
// open the request to the specified source
request.open('GET', source, true);
// execute the request
request.send('');
successCallback = function() {
// on success place response content in the specified container
document.getElementById(container).innerHTML = request.responseText;
// change url in the address bar and save it in the history
history.pushState('','',"?"+container+"="+source);
}
};
// add an event listener to the entire document.
document.addEventListener('click', load, false);
// the reason why the event listener is attached
// to the whole document and not only to the <a>
// elements in the page is that otherwise the links
// included in the dynamic content would not
// liste to the click event
};
现在让我们回顾一下 html 的一些特定元素
正如之前所说，建议的脚本会将行为附加到任何链接，您只需对其进行格式化，以便 load() 函数可以正确读取。格式为“?container_name=filename.php”。其中，container_name 是要在其中加载内容的 div 的 id，而 filename.php 是 ajax 调用以检索内容的文件的名称。
因此，如果您的“external_content.php”文件中有一些内容并希望将其加载到 id 为“main_content”的 div 中，那么您需要执行以下操作
<a href="?main_content=external_content.php">Your link</a>
<div id="main_content"></div>
在此示例中，当页面首次加载时，div“main_content”为空，单击链接时将使用 external_content.php 文件的内容填充。同时，您的浏览器地址栏将从 http://www.example.com/index.php更改 为 http://www.example.com/index.php?main_content=external_content.php 以及这个新网址将在您的浏览器历史记录中注册
现在让我们更进一步，看看如何使这个 SEO 友好，以便 http://www.example.com/index.php?main_content=external_content.php 是一个真实的地址，并且加载时“main_content”div 不为空这一页。
我们可以添加一些 php 代码来处理这个问题。（请注意，您甚至可以编写一些 javascript 来完成类似的工作，但既然您提到了服务器端语言的使用，我决定使用 php）
<a href="?main_content=external_content.php">Load</a>
<div id="main_content">
<?php dynamicLoad('main_content','default_main_content.php'); ?>
</div>
在展示之前我想解释一下 php 函数dynamicLoad() 的作用。它有两个参数，第一个相当于容器 ID，第二个是默认内容所在的文件。更清楚地说，如果请求的 url 是 http://www.example.com/ 该函数会将 default_main_content.php 的内容放在 main_content div 中，但如果浏览器请求的 url 是 http://www.example .com/index.php?main_content=external_content.php 然后函数会将 external_content.php 的内容放入 main_content div 中。
这种机制有助于页面SEO友好和用户友好，因此当搜索引擎爬虫将遵循href“？main_content=external_content.php”时，将其带到url“ http://www.example.com/index.php ” ?main_content=external_content.php " 将发现通过 ajax 调用动态显示相同的内容。对于通过刷新或从历史记录重新加载页面的用户来说也是如此。
这是简单的dynamicLoad() php函数
<?php
function dynamicLoad($contaner,$defaultSource){
$loadSource = $defaultSource;
if(isset($_GET[$contaner])) {
$loadSource = $_GET[$contaner];
}
include($loadSource);
}
?>
正如第一行所述，这不是准备用于生产的代码，它只是对您提出的请求的可能解决方案的解释
更改显示的 url，并据此更改页面内容，并使 url 和页面内容对机器人友好
| 归档时间： |
|
| 查看次数： |
5362 次 |
| 最近记录： |