javascript – 如何在没有页面刷新的情况下更改路由和内容？ (机器人友好)

我想知道是否可以更改网址显示并根据更改页面的内容并使网页的网址和内容成为机器人友好(这意味着机器人可以实际索引它们).

我已经尝试过使用AJAX动态加载数据并使用angularjs路由,但机器人无法对它们编制索引.

也很漂亮的网址和查询字符串不是我正在寻找的,我正在寻找一种理论,在着陆时呈现数据,并在没有页面刷新的情况下点击链接更改路径和内容,我不想写代码两次(一次在服务器端,一次在前端).

这些是我已经尝试过的东西,对解决方案的任何帮助或指导都会受到赞赏.

UPDATE

没有依赖的所有语言的无库解决方案/结构将是最准确的答案！

解决方法

这可以代表解决方案的起点.
在你继续阅读之前,我要回答的主要问题是：

>所有香草javascript
> ajax调用加载新内容
>更改地址栏上的网址而不重新加载页面
>在浏览器历史记录中注册URL更改
> SEO友好

但请注意,所有内容都以草稿代码的形式呈现,以解释解决方案,如果要在生产环境中实现代码,则需要改进代码.

让我们从索引页面开始.

的index.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,第二个是默认内容所在的文件.
更清楚的是,如果请求的网址是
http://www.example.com/
该函数将default_main_content.PHP的内容放在main_content div中
但是如果浏览器请求的网址是
http://www.example.com/index.php?main_content=external_content.php
然后函数会将external_content.PHP的内容放在main_content div中.

这种机制有助于页面对SEO友好和用户友好,因此当搜索引擎爬虫将遵循href
“？main_content = external_content.PHP”
这会带来网址
“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);
    }
?>

如第一行中所述,这不是准备生产的代码,它只是对您提出的请求的可能解决方案的解释

to change the url showing and according to that change the content of the page and make the urls and the content of the page to be robot friendly

javascript – 如何在没有页面刷新的情况下更改路由和内容？ (机器人友好)

解决方法

相关推荐