个人中心
gpt4 book ai didi

javascript - 单页网站方法

转载 作者：行者123 更新时间：2023-11-30 14:50:34 25 4
gpt4 key购买 nike

我目前正在开发一个网站，我想收集专家的意见，以了解我的方向是否正确，因为在开始开发之前我对网页设计的知识几乎为零几天前。我希望问题不要太模糊，可以用事实来支持，而不仅仅是“意见”

至于互联网上的众多网站，我的网站具有所有页面共享的永久页眉和页脚。因此，当我反射(reflection)如何设计网站时，我想到了两个选择:

  1. 创建我将在每个页面中重新导入的 HTML 页眉和页脚
  2. 创建一个带有页眉和页脚的模板页面，并仅导入/修改该页面中的内容(在我的例子中是在“标签”部分)。

无论错误还是正确，我选择了第二个选项，因为我认为它更有意义并且实际上简化了“内容 HTML 文件”，因为它基本上只需要包含实际文章。我还认为这会带来更简洁的方法和更流畅的导航体验，因为在从一篇文章切换到另一篇文章时不会观察到页面转换(实际上整个浏览体验是在一个页面中完成的)。

但是，此解决方案有其自身的问题。比如，URL不变，如何通过URL分享一篇文章给 friend ？不可能......因此，我实现了一个变通解决方案。这个想法很简单:通过附加一些参数来修改 URL。它工作正常，但我想知道它是否没有被过度杀伤。此外，我担心每当修改 URL 时页面实际上都会刷新(只是为了更改一个参数......)。是这样吗？

这是我的脚本。如果没有参数传递给 URL，网站将以英文显示主页并将这些参数添加到 URL(page=home 和 lang=en)。然而，我注意到页面使用这种方法加载了两次......(当我如上所述修改 URL 时它被重新加载......)。我怎样才能避免这种行为？

<script>
    $(document).ready(function() {
        var params, mainUrl;
        mainUrl = window.location.href;
        params = window.location.search.substr(1);

        if (!params) { //if params is empty
            linkName = "home-en";
            window.location.href = mainUrl + "?page=home&lang=en";
        } else {
            var n = params.search("page=") + 5;
            var m = params.search("&lang=");
            linkName = params.substr(n, m - n);
            lang = params.substr(m + 6);
        }
        $('#' + lang).addClass('selected');
        document.body.className = lang;
        document.body.className = 'en'

        $("#included-content").load(linkName + "-" + lang + ".html");

        $('.link').click(function(element) {
            newLinkName = $(this).attr('id');

            window.location.href = mainUrl.replace("page=" + linkName, "page=" + newLinkName);
            $("#included-content").load(linkName + "-" + lang + ".html");

            return false;
        });

        var buttons = $('#languages button');
        buttons.on('click', function(e) {
            buttons.removeClass('selected');
            $(this).addClass('selected');
            var newlang = $(this).attr('id');
            window.location.href = mainUrl.replace("&lang=" + lang, "&lang=" + newlang);

            $("#included-content").load(linkName + "-" + lang + ".html");
        });
    });
</script>

这是正文:

<body>
    <div id="wrapper">
        <header>
            <h1> Title</h1>
            <div id="languages">
                <button id="en" type="button" onclick="document.body.className = 'en'">En</button>
                <button id="fr" type="button" onclick="document.body.className = 'fr'">Fr</button>
            </div>
        </header>
        <nav>
            <ul lang="en">
                <li><a href="" class="link" id="home">Home</a></li>
                <li><a href="" class="link" id="books">Books</a></li>
                <li><a href="" class="link" id="articles">Articles</a></li>
                <li><a href="" class="link" id="biography">Bio</a></li>
            </ul>
            <ul lang="fr">
                <li><a href="" class="link" id="home">Accueil</a></li>
                <li><a href="" class="link" id="books">Livres</a></li>
                <li><a href="" class="link" id="articles">Articles</a></li>
                <li><a href="" class="link" id="biography">Bio</a></li>
            </ul>
        </nav>
        <section>
            <div id="included-content"></div>
        </section>
        <footer>
            <p> Author &copy; all rights reserved</p>
        </footer>
    </div>
</body>

列表中的 id 与 HTML 文件共享其名称(例如 home-fr.html 或 biography-en.html)。

所以，我的问题基本上是要知道这是否是一种不错的方法，以及它是否在“真实网站应用程序”中以类似方式完成？我知道要处理网站语言，将参数传递给 URL 是正确的方法，但我担心它会使页面的所有内容过于复杂。我还想知道它是否真的在导航体验方面提供了优势。我在想，也许现在当从一个页面更改到另一个共享相同页眉和页脚的页面时，浏览器能够将它们保留在页面上，而不需要删除然后重新绘制它们。

我希望我能够清楚地说出我的想法。这种方法可行吗？

最佳答案

例如，您应该尝试在 url 中使用散列 #，以便您的应用程序知道您要查找的 url

example.com/#/share/post/546

使用 javascript 可以通过 

window.location.hash

所以你只需将它传递给你的应用程序

例如

var url = window.location.hash;
//jquery script
jQuery('#appbody').load(url);

我希望这个见解对您有所帮助，因为这将停止任何可能的刷新并允许共享链接

关于javascript - 单页网站方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48188867/

25 4 0
文章推荐： javascript - 计算给定时间 javascript 中的点击次数/空格键
文章推荐： c# - Web Api 2 - 自定义数据类型 JSON 序列化
文章推荐： c# - 将值从一个地方传递到另一个地方
文章推荐： python - 如何提取 .wav 文件的值
行者123
个人简介

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

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