Question

我们有一个Web应用程序，并使用框架集进行布局。（Example）。但我读到框架已经被弃用，并且基于网站也不符合ADA标准，谷歌或任何其他搜索引擎都无法获取任何内容，因为这些系统只会找到设置框架的页面而不是框架中的内容本身。所以我的问题是框架的替代品是什么？谢谢，拉维

Answer 1

使用div标签。尝试这样的事情：

<div id="header">
    HEADER STUFFS
</div>
<div id="below-header">
    <div id="menu">
        MENU STUFFS
    </div>
    <div id="content">
        CONTENT STUFFS
    </div>
</div>

使用以下CSS：

#header {
    height: HEADER HEIGHT;
}
#below-header {
    position: absolute;
    top: HEADER HEIGHT;
    right: 0;
    bottom: 0;
    left: 0;
}
    #menu {
        width: MENU WIDTH;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }
    #content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: MENU WIDTH;
    }

当然要替换你自己的喜好。您可以使用百分比表示宽度和高度。

然后，真正的挑战是当按下菜单中的链接时如何在content-div中加载内容。为此，我建议使用AJAX（最好使用像jQuery这样的库，因为它使它变得更容易）。另一种解决方案是制作大量具有相同标题和菜单但内容不同的页面，但我不建议这样做。你会永远后悔的。

一个简单的脚本是：

$(function() {
    $("a").each(function() {
        var pat = /^https?:\/\//i;
        var url = $(this).attr("href");
        if(!pat.test(url)) {
            $("body").on("click", "a", (function(e) {
                e.preventDefault();
                $.get(url, function(data) {
                    $("#content").html(data);
                });
            });
        }
    });
}

此处所有相对链接都设置为将内容加载到内容div中而不重新加载页面。所以：

<a href="contact.html">Contact us!</a>

会将contact.html的内容加载到内容div中：

<a href="http://www.google.com">Google.com</a>

会将网页重定向到google.com。

要考虑的其他事项是在更改内容时更改网址。但那是一个完全不同的故事。

希望这有帮助。

Answer 2

框架肯定已被弃用，因为您正确地指出主要网站非常积极地劝阻。如今许多网站都使用CSS来协调Javascript（特别是通过使用像jQuery这样的库（尤其是UI部分）和Dojo），以便拥有用于提供的动态布局框架。

尤其是在需要重新加载页面的部分而不重新加载整个页面的情况下，在这种情况下，AJAX通常用于加载页面的一部分。有许多很棒的教程，我不会在这里列出（谷歌是你的朋友！）关于如何实现这一点，并实现类似于以前提供的框架的布局。

这绝对是最通用的答案，因为我不知道您的编码技能水平或预算（时间或金钱），因为有很多简单的方法来建立一个简单的网站（Sites.google.com ，等等）。

框架的替代品

2 个答案: