jquery - 旧版 iframe，什么是它们的完整替代品？

Question

大量使用主 iframe 的网站

我继承了一个遗留代码库/网站，http://ninjawars.net 。在我开始在网站上编码之前，iframe 就已就位。

我经常听说 iframe 的问题(安全性、可访问性、布局问题)，并且我非常确定 iframe 对搜索引擎不友好(这是一个很大的缺点)。我个人使用 iframe 的经验主要是加载时间问题(我猜是大量的 http 请求？)。

寻找 iframe 的替代品

不幸的是，没有人说“摆脱 iframe”也为我的情况提供了有效的解决方案，通常假设简单地包含框架内容将使一切变得彩虹和 unicorn (例如 Converting from iframes )。就我而言，静态包含解决方案对我来说几乎没有任何作用。

jQuery load()(例如，将内容动态加载到 div 中)更适合，但转换到该方法需要时间，并且不利于搜索引擎或非 javascript 浏览的可访问性用户。 jQuery load() 解决了速度问题，但我不确定它是否解决了可访问性问题。即使没有 javascript，iframe 仍然可以工作(用于手动点击)，尽管让 iframe 在 javascript 下工作的额外支持工作是否实用，我不确定。

潜在的替代方案？

• jQuery 和 load()
• 将网站完全重写为具有公共(public)页眉/页脚/侧边栏的静态页面以及一些小型 JavaScript 轮询。
• >？？？我还没有考虑到的事情？？？

Answer 1

iframe 并不是某些无名恶魔的产物，有些人会让您相信这一点。对于网络应用程序来说，它们仍然有非常有用的地方。

但是，它们绝对不利于搜索引擎优化!除非绝对必要，否则我绝不会建议“普通”公共(public)网站使用它们，尤其是在 SEO 是一个大问题的情况下。

我认为 jQuery 是解决可访问性问题的一个不错的选择。 jQuery 的一大优点是，对于那些没有 javascript 之类的搜索引擎的用户来说，可以轻松地使您的网站优雅地降级。

基本上，我使用 jQuery 访问新公共(public)网站的方式如下:

1. 构建具有静态导航的网站。我通常从某个 ajax 请求(在您的情况下，在 iframe 中)获取的所有内容 block ，我都可以在其自己的页面中访问。 “联系我们”表单就是一个很好的例子 - 对于非 javascript 用户，将其放在自己的页面中，但最终会使用 ajax 将其加载到普通用户的模态 div 中。静态导航确保搜索引擎看到一切。在您的情况下，将 iframe 替换为仅包含指向 iframe 当前正在加载的页面的链接的 div。

2. 添加 jQuery。一次一页，开始用 ajax 调用替换所有出现的静态导航链接，以加载您想要的内容。

3. 不断重构 JavaScript，直到将其缩小为可在网站上的所有导航中运行的脚本。

一个简单的可正常降级的网站示例如下(取 self 工作过的网站):

$(document).ready(function() {

    $("#menu a[href]").each(function() {
        this.href = this.href.replace(/Index/, "Ajax");
    })
    .click(function() {
        $.get(this.href, null, function(data) {
            var $main = $("#main");
            $main.hide();
            $("#main").html(data);
            $main.fadeIn("slow");
        });
        return false;
    });

此脚本在网站上的所有页面中运行，将菜单导航目标 URL 中出现的任何“/Index/”替换为“/Ajax/”，这会将 URL 重定向到返回 ajax 响应的资源，然后添加处理将内容添加到页面的单击处理程序。

现在搜索引擎和非 JS 用户可以遵循静态导航，JS 用户可以获得更快捷的 UI 和一些效果。