iFrame question before jumping in

iFrame question before I convert pages

[ExaggerArt]

I know frames & iframes get a lot of flack, but I am tempted to use an iframe on one of my sites. I experimented going the honorable route with <object> and 100% validation in XHTML....but then I saw a gigantic white void in Explorer! I was recommended using iFrame...so far it seems to render on all the important browers for my purposes....and I only have 2 validation errors. I am not too caught up with the 100% carrot...tastes the exact same as the 94% carrot. I like the fact I can still control the look of the vendor site to an extent, by framing it within my site & template.

My question is about browser support of ecommerce through an iframe. The only drawback I see is that the client can't see the vendor's url and "https" during a transaction. Other than that is there some "major" iframe & browser conflict issue around ecommerce transactions? Am I missing something big? I just do not want to start coverting pages with raw links to the iframe pages only to find out a "major" security program or "major" browser is preventing the transactions. Thanks.

[lexipixel]

You may get a warning mixing http and https content... it depends which way the IFRAME is setup. (e.g.- if the IFRAME is in the secure page pulling in unsecure content, or vice versa).

Funny -- I just had a customer call an IFRAME "issue" to my attention today -- not security related, but an IE browser / display specific issue.

He has an (ecommerce) website and needed some functionality that could not be coded into the software. I wrote a small "tool" for him that is pulled into the page using an IFRAME.

<!-- START: TOOL CODE -->
<iframe width="100%" height="276" scrolling="no" frameborder="1" marginwidth="0" marginheight="0" src="http://www.example.com/tool.htm"></iframe>
<!-- END: TOOL CODE -->

He's pastes the above code to display the "tool" into several product description pages (and on multiple sites -- another benefit as we only have to update the "tool" in one place and it updates everywhere)...

Anyway, the behavior we are seeing is that the page "jumps" up to the top of the IFRAME'd content when a click on the tool reloads the content of the IFRAME.

FYI - the content in the IFRAME is a combination of JS, HTML, image files and some CSS... The "jump" only occurs when a user clicks on the content -- but does not "jump" when they hover over part of the tool (even though hovering changes the content via JS -- I am assuming the behavior is due to the fact that the hover interaction is JS and user side and a "click" pulls fresh content from the server)..

So -- as you can see, there may be "issues" depending on what you put in the IFRAME, how users interact with it, and which browser they use.

[lexipixel]

Follow up on my own issue:

I searched the web for others having the same problem:

Search for: internet explorer iframe page jumps top

..and found several people posting on forums with the same problem... the clue was they all mentioned links and more specifically, "anchors".

Since I only needed the hover to change the content, I changed the HTML in the IFRAME from:

<a href="#" class="thumb"><img src="http://example.com/swatch.jpg" onMouseover="show('http://example.com/prod.jpg');"></a>

to:

<a class="thumb"><img src="http://example.com/swatch.jpg" onMouseover="show('http://example.com/prod.jpg');"></a>

...yes, it's an <a></a> tag with no HREF="#"...

The JS for the hover still works, the CSS for the <a> tag still works, (both tested in IE and FF), and the user can click all day and the IFRAME will not "jump to the top of the parent page".

(Figured I'd post here since others seem to be looking for a fix for this behavior).