HTML5 iFrame Seamless Attribute

Question

in HTML5 the iframe has new attributes like  seamless  that should remove borders and scrollbars  I ve tried it but doesn t seem to work  I still can see scrollbars and borders  I m using Google Chrome as browser   Here s my code    lt iframe seamless  seamless  title  google  width  600  height  300  src  http   www google co uk  gt  lt  iframe gt    Any idea why it s not working   One more question  is it possible to target a specific section of the page inside the iframe

User · Answer

It is possible to use the semless attribute right now, here i found a german article http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

and here are another presentation about this topic: http://benvinegar.github.com/seamless-talk/

You have to use the window.postMessage method to communicate between the parent and the iframe.

User · Answer

According to the latest W3C HTML5 recommendation  which is likely to be the final HTML5 standard  published today  there is no seamless attribute in the iframe element anymore  It seems to have been removed somewhere in the standardization process   According to caniuse com no major browser does support this attribute  anymore   so you probably shouldn t use it

User · Answer

iO8 has removed support for the iframe seamless attribute    Tested in Safari  HomeScreen  new WKWebView and UIWebView    Full Details and performance review of other iOS 8 changes    iOS8 changes on Cordova mailing list Sencha com Blog   Apple Shows Love for HTML5 with iOS 8

User · Answer

It s not supported correctly yet   Chrome 31  and possibly an earlier version  supports some parts of the attribute  but it is not fully supported

User · Answer

I couldn t find anything that met my requirements  hece I came up with this script  depends on jQuery    https   gist github com invernizzie 95182de86ea9dc5daa80  It will resize the iframe to the viewport size  taking into account wider content   It could use an improvement to use the viewport height instead of the content height  in the case that the former is bigger

User · Answer

Updated  October 2016  The seamless attribute no longer exists  It was originally pitched to be included in the first HTML5 spec  but subsequently dropped  An unrelated attribute of the same name made a brief cameo in the HTML5 1 draft  but that too was ditched mid-2016      So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesn   t seem to be what anybody wanted to begin with  Or at least it   s more than anybody actually wanted  And anyway like  annevk says  it   s seems a lot of it   s since been    overcome by events    in light of Shadow DOM    In other words  purge the seamless attribute from your memory  and pretend it never existed   For posterity s sake  here s my original answer from five years ago   Original answer  April 2011  The attribute is in draft mode at the moment  For that reason  none of the current browsers are supporting it yet  as the implementation is subject to change   In the meantime  it s best just to use CSS to strip the borders scrollbars from the iframe   iframe seamless       background-color  transparent      border  0px none transparent      padding  0px      overflow  hidden      There s more to the seamless attribute than what can be added with CSS  part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe  acting as though the embedded document was one big  nested inside the  element  for example    Lastly  versions of Internet Explorer  8 and earlier  require additional attributes in order to remove the borders  scrollbars and background colour    lt iframe frameborder  0  allowtransparency  true  scrolling  no  src       gt  lt  iframe gt    Naturally  this doesn t validate  So it s up to you how to handle it  My  picky  approach would be to sniff the agent string and add the attributes for IE versions earlier than 9   Hope that helps

User · Answer

Still at 2014 seamless iframe is not fully supported by all of the major browsers  so you should look for an alternative solution   By January 2014 seamless iframe is still not supported for Firefox neither IE 11  and it s supported by Chrome  Safari and Opera  the webkit version   If you wanna check this and more supported options in detail  the HTML5 test site would be a good option   http   html5test com results desktop html  You can check different platforms  at the score section you can click every browser and see what s supported and what s not

User · Answer

You only need to write      seamless   in your code  There is not need for      seamless   seamless    I just found this out myself    EDIT - this does not remove scrollbars  Strangely      scrolling  no     still seems to work in html5  I have tried using the overflow function with an inline style as recommended by html5 but this doesn t work for me

User · Answer

I thought this might be useful to someone   in chrome version 32  a 2-pixels border automatically appears around iframes without the seamless attribute  It can be easily removed by adding this CSS rule   iframe not  seamless     border none      Chrome uses the same selector with these default user-agent styles   iframe not  seamless       border  2px inset    border-image-source  initial    border-image-slice  initial    border-image-width  initial    border-image-outset  initial    border-image-repeat  initial

User · Answer

Use the frameborder attribute on your iframe and set it to frameborder  0    That produces the seamless look  Now you maybe saying I want the nested iframe to control rather I have scroll bars  Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height  Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome  That will get you in the right direction

[html] HTML5 iFrame Seamless Attribute

Examples related to html

Examples related to iframe

Examples related to attributes