jquery - iframe 对于我的 MVC Web 应用程序场景是好是坏

Question

我一直在研究 Intranet Web 解决方案，这些解决方案将由系统的一组特定用户使用，例如供应链管理。没有搜索引擎优化或营销 - 只有易于使用和简单性来吸引他们并使他们的任务变得简单。

我正在将 MVC2 与 ASP.Net 结合使用。我将用通用术语解释我的场景。我有一个带有选项卡 View 的页面。第一个选项卡从主表加载记录，其他选项卡加载某些详细信息表的数据。理想的例子是这样的:

• Tab 1: Add/Edit Customer (master) record
• Tab 2: Add/Edit Orders for a Customer
• Tab 3: Add/Edit Items for an Order (depends on tab 2)
• Tab 4: Add/Edit different addresses for that Customer

我正在使用 jQuery ui 选项卡。现在，根据我对 iframe 的了解 - 如果我设计此页面( View )以将第一个选项卡及其内容包含在一个页面( View )中，其余选项卡具有 iframe，其中我使用单独的页面( View )。简而言之 - 所有依赖的选项卡都将有其单独的页面。

我看到的好处 -

1. The page becomes v.light and fast because while the user is working on tab 1 the other tabs will be loading their iframe.
2. Functionally, each tab has to have its own Add/Edit and list independent. For example if I'm adding addresses then only my address iframe will be refreshed and the rest of the tabs/pages need not postback and reload the data.
3. Having a universal save/cancel feature would require a v.complex in-memory caching of the object hierarchy if everything is in a single page(View). I can use user-controls (i.e. .ascx) but still processing everything in a single action is like huge & complex.
4. I need not worry about SEO or bookmarks or dynamic dimensions. Instead I'm getting SOC (Separation of concerns), everything is being distributed v.well and the main thing is that it becomes extremely fast as the postbacks are separate.

.. 如果我使用 iframe 的话，这一切都会发生:) 但是，我没有看到很多人喜欢 iframe，例如: Are iframes a terrible idea?

如果是这样 - 是否有等效的 jQuery 替代方案？我希望它具有 iframe 的优点，并且至少具有通过 url 和单独的回发动态加载内容的功能。我不想创建一个困惑的 AJAX blob，它可以处理事情但使后端同样复杂。

Kindly let me know your thoughts - I don't want to know how good/bad iframes are, I just want to know what suits my requirements and if there's a better alternative to iframes .. for my scenario.

编辑#1:我得到了支持浏览器的 iframe 列表 -

http://www.webmaster-resources101.com/articles/view/417/

编辑#2:我得到的东西可能是迈向更好的选择而不是 iframe 的垫脚石 -

它是两个 jQuery 插件的组合，一个是著名的 jQuery tabs 插件，另一个是可以控制容器回发的 adhoc 插件。

jQuery ui tab: http://jqueryui.com/demos/tabs/

jquery-hijack: http://code.google.com/p/jquery-hijack/

这能行吗？还有其他更好的选择吗？

Answer 1

TL;DR

Kindly let me know your thoughts - I don't want to know how good/bad iframes are, I just want to know what suits my requirements and if there's a better alternative to iframes .. for my scenario.

AJAX 解决您的客户端-服务器通信问题。有大量的客户端库可以使 ajax 变得非常简单。例如Backbone与开箱即用的 RESTful 服务集成。

AJAX 的替代方案是 COMET 和 WebSocket。

彻底的推理

1.The page becomes v.light and fast because while the user is working on tab 1 the other tabs will be loading their iframe.

• Iframe 会阻止主页加载

如果您想使用 onload 处理程序，则无论如何都必须等待所有 iframe 加载。

完全相同的概念适用于按顺序加载 HTML。我不认为 HTML 加载是一个明显的瓶颈。我无法想象使用 iframe 会显着提高速度。

但是，通过使用合理的 HTML 和延迟加载/分页，您可能会获得显着的速度提升。

2.Functionally, each tab has to have its own Add/Edit and list independent. For example if I'm adding addresses then only my address iframe will be refreshed and the rest of the tabs/pages need not postback and reload the data.

每个选项卡都应该有自己的表单，而不是可以回发。如果用户有 JavaScript，那么您可以使用 ajax。

3.Having a universal save/cancel feature would require a v.complex in-memory caching of the object hierarchy if everything is in a single page(View). I can use user-controls (i.e. .ascx) but still processing everything in a single action is like huge & complex.

没有。使用 Backbone /脊柱。实现客户端 MVC，它非常简单且结构良好。

4.I need not worry about SEO or bookmarks or dynamic dimensions. Instead I'm getting SOC (Separation of concerns), everything is being distributed v.well and the main thing is that it becomes extremely fast as the postbacks are separate.

您仍然发回而不是使用 ajax，这在视觉上会更慢。使用正确的 HTML5 技术，包括客户端 MVC，它的分发会非常好且非常快。

缺点:

• 跨 iframe 通信是一个痛点。

它会减慢你的速度，而且开发起来很痛苦。 iframe 中的所有内容都硬耦合在一起，因为它们都与一个客户相关。

您将如何处理主选项卡中客户的更改？您是否要重新加载其他 3 个 iframe 以使用正确的数据重新填充它？

这非常昂贵且缓慢

• 非语义

Contexts in which this element can be used: Where embedded content is expected.

您的选项卡不是嵌入内容。只有普通的 HTML 表单，而且应该如此。

• 缺乏跨 iframe 的代码重用，因为每个 iframe 都有自己的代码池。

您也无法重复使用元素和全局数据，因为每个 iframe 都已沙箱化。这意味着扩展第五个选项卡将是一件痛苦的事情，因为您必须开发一个全新的选项卡，而不是插入现有的功能。

我相信您的主要问题是不了解有很多工具可以编写高质量的 javascript 应用程序来解决您的问题。

使用backbone或spine或knockoutjs 。您可能还想考虑您选择的模板引擎(我推荐 EJS 或 Jade)