个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 00:00:03 27 4
gpt4 key购买 nike

我想知道是否可以更改显示的 url 并据此更改页面内容，并使 url 和页面内容对机器人友好(这意味着机器人实际上可以为它们编制索引)。

我已经尝试过使用 AJAX 动态加载数据并使用 angularjs 路由，但它们都不能被机器人索引。

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

这些是我已经尝试过的事情，任何对解决方案的帮助或指导都将不胜感激。

更新

适用于所有语言且不依赖的无库解决方案/结构将是最准确的答案!

最佳答案

这里有一些东西可以代表解决方案的起点。在继续阅读之前，请记住以下关于我的回答的主要事项:

  • 所有原生 javascript
  • ajax 调用加载新内容
  • 在不重新加载页面的情况下更改地址栏上的 url
  • 在浏览器历史记录中注册 url 更改
  • 搜索引擎优化友好

但请注意，草稿代码中的所有内容都是为了解释解决方案，如果您想在生产环境中实现它，则需要改进代码。

让我们从索引页开始。

索引.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并且这个新的 url 将在您的浏览器历史记录中注册

现在让我们更进一步，看看我们如何使这个 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”这带来了网址“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 - 如何在不刷新页面的情况下更改路由和内容？ (机器人友好)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37511989/

27 4 0
文章推荐： ios - Swift 4 - 标签栏项目上的按钮
文章推荐： javascript - Socket.io 会乱序发送吗？如果不稳定怎么办？
文章推荐： javascript - 如何使用 node.js 从 Yahoo Finance JSON 中提取数据？
文章推荐： php - 刷新后显示的 Laravel 闪存消息
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com