iframe good or bad for my MVC web-app scenario

问题:

I've been working into intranet web solutions which are to be used by a specific set of users of a system - like supply chain management. No SEO or marketing - only easy of use and simplicity that appeals them and makes their task simple.

I'm using MVC2 with ASP.Net. I'll explain my scenario in generic terms. I've a page which has a tab view. The first tab loads a record from a master table and the other tabs load data for some details table. And ideal example would be like:

• 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

I'm using jQuery ui tab. Now as per my knowledge of iframes - if I design this page(View) to include the first tab and its contents in one page(View) and the rest of the tabs have iframe in which I use separate pages(Views). In short - all the dependent tabs will have their separate pages.

The benefits I see -

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.

.. all this if I get to use iframes :) However, I don't see many people like iframes like: Are iframes a terrible idea?

If so - is there an equivalent jQuery alternative? I'd expect it to have the benefits of iframe and atleast the feature to load the content dynamically via url and separate postbacks. I don't want to create a messy AJAX blob which can handle things but make the backend equally complex.

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.

EDIT #1: I got a list of iframe supporting browsers -

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

EDIT #2: I got something that might be a stepping stone towards a better optioninstead of iframe -

Its a combination of two jQuery plugins on is the famous jQuery tabs plugin and another is the adhoc plugin which can control the postback of a container.

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

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

Can this work? Any other better options like this?

回答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 solves your client-server communication problems. There are plenty of client side libraries that make ajax very easy. For example Backbone integrates with a RESTful service right out of the box.

Alternatives to AJAX are COMET and WebSockets.

Thorough Reasoning

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.

• Iframes block onload of the main page

If you want to use onload handlers you have to wait for all iframes to load anyway.

The exact same concepts apply to loading HTML in order. I don't think HTML loading is a noticable bottleneck. I can't imagine getting a noticable speed increase from using iframes.

You may however get a noticable speed increase from using sensible HTML and lazy loading / pagination.

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.

Each tab should have it's own form instead that you can postback. If the user has JavaScript then you use 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.

No. Use backbone/spine. Implement client side MVC and it's very simple and well structured.

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.

Your still posting back rather then using ajax which is visually slower. Use proper HTML5 techiniques including client side MVC and it will distributed very well and extremely fast.

Disadvantages:

• Cross iframe communication is a right pain.

It slows you down, and is a pain to develop. All your content in iframes are hard coupled together because they all relate to one customer.

How are you going to handle changing the customer in the main tab? Are you going to reload the other 3 iframes to re-populate it with the correct data?

That's very expensive and slow

• Not semantic

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

Your tabs are not embedded content. There just normal HTML forms and they should be.

• Lack of code re-use across iframes as each has it's own code pool.

You also can't re-use elements and global data as each iframe is sandboxed. This means it's going to be a pain to extend for a fifth tab as you have to develop an entire new tab rather then plug into existing functionality.

I believe your main problem is not understanding that there are plenty of tools for writing high quality javascript applications to solve your problem for you.

Use backbone or spine or knockoutjs. You may also want to consider a templating engine of your choice (I would recommend EJS or Jade)

回答2:

It is okay to use an iframe provided that you have the control over the browser which the application runs on.

Otherwise, you would run into problems like browser compatibility soon.

回答3:

I had to get off this post to complete it - Alternative for iframes for jQuery ui tabs plugin - with support for postback

I didn't wanted a fully "JSified" ajax base model handling because it brings the business object level details in the presentation layer. So, to keep it abstract I ended up using a jQuery plugin jquery.forms.js which allows to ajaxify my forms.

Combined with the "partial view" concept of MVC I was able to achieve a complete AJAX postback solution (without making it complex or bringing my model level handling on client side as features in knockoutjs, backbone, etc... (they're great but I wanted to keep thing simple and in control (on server side))

Thank you.