How to apply CSS to iframe

Question

I have a simple page that has some iframe sections  to display RSS links   How can I apply the same CSS format from the main page to the page displayed in the iframe

User · Answer

The above with a little change works   var cssLink   document createElement  link    cssLink href    pFstylesEditor css    cssLink rel    stylesheet    cssLink type    text css       Instead of this   frames  frame1   document body appendChild cssLink     Do this  var doc document getElementById  edit   contentWindow document     If you are doing any dynamic writing do that first doc open    doc write myData   doc close       Then append child doc body appendChild cssLink     Works fine with ff3 and ie8 at least

User · Answer

use can try this      iframe   load  function             iframe   contents   find  head         append     lt style type  text css  gt    my-class display none     lt  style gt

User · Answer

use can try this      iframe   load  function             iframe   contents   find  head         append     lt style type  text css  gt    my-class display none     lt  style gt

User · Answer

Incase if you have access to iframe page and want a different CSS to apply on it only when you load it via iframe on your page  here I found a solution for these kind of things  this works even if iframe is loading a different domain  check about postMessage    plan is  send the css to iframe as a message like  iframenode postMessage  h2 color red              is to send this message irrespective of what domain it is in iframe  and receive the message in iframe and add the received message CSS  to that document head   code to add in iframe page   window addEventListener  message  function e        if e data     send user details       document head appendChild   lt style gt   e data   lt  style gt

User · Answer

If the content of the iframe is not completely under your control or you want to access the content from different pages with different styles you could try manipulating it using JavaScript   var frm   frames  frame   document  var otherhead   frm getElementsByTagName  head   0   var link   frm createElement  link    link setAttribute  rel    stylesheet    link setAttribute  type    text css    link setAttribute  href    style css    otherhead appendChild link     Note that depending on what browser you use this might only work on pages served from the same domain

User · Answer

Here  There are two things inside the domain   iFrame Section Page Loaded inside the iFrame   So you want to style those two sections as follows   1  Style for the iFrame Section  It can style using CSS with that respected id or class name  You can just style it in your parent Style sheets also    lt style gt   my iFrame  height  300px  width  100   position absolute  top 0  left 0  border  1px black solid     lt  style gt    lt iframe name  iframe1  id  my iFrame  src     cellspacing  0  gt  lt  iframe gt    2  Style the Page Loaded inside the iFrame  This Styles can be loaded from the parent page with the help of Javascript  var cssFile    document createElement  link    cssFile rel     stylesheet    cssFile type    text css    cssFile href    iFramePage css      then set that CSS file to the respected iFrame section    to Load in the Body Part frames  my iFrame   document body appendChild cssFile      to Load in the Head Part frames  my iFrame   document head appendChild cssFile       Here  You can edit the Head Part of the Page inside the iFrame using this way also  var  iFrameHead       my iFrame   contents   find  head     iFrameHead append         lt link  gt            rel   stylesheet          href  urlPath         type   text css

User · Answer

I found another solution to put the style in the main html like this   lt style id  iframestyle  gt      html           color  white          background  black         lt  style gt   lt style gt      html           color  initial          background  initial            iframe           border  none         lt  style gt    and then in iframe do this  see the js onload    lt iframe  onload  iframe document head appendChild ifstyle   name  log  src   upgrading log  gt  lt  iframe gt    and in js   lt script gt      ifstyle   document getElementById  iframestyle       iframe   top frames  log     lt  script gt    It may not be the best solution  and it certainly can be improved  but it is another option if you want to keep a  style  tag in parent window

User · Answer

If the content of the iframe is not completely under your control or you want to access the content from different pages with different styles you could try manipulating it using JavaScript   var frm   frames  frame   document  var otherhead   frm getElementsByTagName  head   0   var link   frm createElement  link    link setAttribute  rel    stylesheet    link setAttribute  type    text css    link setAttribute  href    style css    otherhead appendChild link     Note that depending on what browser you use this might only work on pages served from the same domain

User · Answer

This is just a concept  but don t implement this without security checks and filtering  Otherwise script could hack your site   Answer  if you control target site  you can setup the receiver script like   1  set the iframe link with style parameter  like   http   your site com target php color red    the last phrase is a color red   encoded by urlencode function   2  set the receiver page target php like this    lt head gt              col   FILTER VAR SANITIZE STRING    GET  color      lt style gt  xyz color   lt  php echo  in array   col    red   yellow   green       col    black      gt     lt  style gt

User · Answer

An iframe is universally handled like a different HTML page by most browsers  If you want to apply the same stylesheet to the content of the iframe  just reference it from the pages used in there

User · Answer

Edit  This does not work cross domain unless the appropriate CORS header is set   There are two different things here  the style of the iframe block and the style of the page embedded in the iframe  You can set the style of the iframe block the usual way    lt iframe name  iframe1  id  iframe1  src  empty htm           frameborder  0  border  0  cellspacing  0          style  border-style  none width  100   height  120px   gt  lt  iframe gt    The style of the page embedded in the iframe must be either set by including it in the child page    lt link type  text css  rel  Stylesheet  href  Style simple css    gt    Or it can be loaded from the parent page with Javascript   var cssLink   document createElement  link    cssLink href    style css    cssLink rel    stylesheet    cssLink type    text css    frames  iframe1   document head appendChild cssLink

User · Answer

My compact version    lt script type  text javascript  gt    window  load function          var frame      iframe   get 0       if  frame    null            var frmHead     frame  contents   find  head            if  frmHead    null                frmHead append    style  link rel stylesheet    clone        clone existing css link               frmHead append     lt link  gt      rel   stylesheet   href    styles style css   type   text css          or create css link yourself                         lt  script gt    However  sometimes the iframe is not ready on window loaded  so there is a need of using a timer   Ready-to-use code  with timer     lt script type  text javascript  gt  var frameListener    window  load function          frameListener   setInterval  frameLoaded     50       function frameLoaded         var frame      iframe   get 0       if  frame    null            var frmHead     frame  contents   find  head            if  frmHead    null                clearInterval frameListener      stop the listener             frmHead append    style  link rel stylesheet    clone        clone existing css link               frmHead append     lt link  gt      rel   stylesheet   href    styles style css   type   text css          or create css link yourself                    lt  script gt       and jQuery link    lt script src  https   ajax aspnetcdn com ajax jQuery jquery-1 9 1 min js  type  text javascript  gt  lt  script gt

User · Answer

You will not be able to style the contents of the iframe this way  My suggestion would be to use serverside scripting  PHP  ASP  or a Perl script  or find an online service that will convert a feed to JavaScript code  The only other way to do it would be if you can do a serverside include

User · Answer

Well  I have followed these steps    Div with a class to hold iframe Add iframe to the div  In CSS file     divClass   width  500px  height  500px    divClass iframe   width  100   height  100       This works in IE 6  Should work in other browsers  do check

User · Answer

Incase if you have access to iframe page and want a different CSS to apply on it only when you load it via iframe on your page  here I found a solution for these kind of things  this works even if iframe is loading a different domain  check about postMessage    plan is  send the css to iframe as a message like  iframenode postMessage  h2 color red              is to send this message irrespective of what domain it is in iframe  and receive the message in iframe and add the received message CSS  to that document head   code to add in iframe page   window addEventListener  message  function e        if e data     send user details       document head appendChild   lt style gt   e data   lt  style gt

User · Answer

Other answers here seem to use jQuery and CSS links   This code uses vanilla JavaScript  It creates a new  lt style gt  element  It sets the text content of that element to be a string containing the new CSS  And it appends that element directly to the iframe document s head    var iframe   document getElementById  the-iframe    var style   document createElement  style    style textContent       some-class-name           some-style-name  some-value              iframe contentDocument head appendChild style

User · Answer

I think the easiest way is to add another div  in the same place as the iframe  then   make its z-index bigger than the iframe container  so you can easly just style your own div  If you need to click on it  just use pointer-events none on your own div  so the iframe would be working in case you need to click on it     I hope It will help someone

User · Answer

var  head       eFormIFrame   contents   find  head      head append     lt link  gt          rel   stylesheet       href  url      type   text css

User · Answer

My compact version    lt script type  text javascript  gt    window  load function          var frame      iframe   get 0       if  frame    null            var frmHead     frame  contents   find  head            if  frmHead    null                frmHead append    style  link rel stylesheet    clone        clone existing css link               frmHead append     lt link  gt      rel   stylesheet   href    styles style css   type   text css          or create css link yourself                         lt  script gt    However  sometimes the iframe is not ready on window loaded  so there is a need of using a timer   Ready-to-use code  with timer     lt script type  text javascript  gt  var frameListener    window  load function          frameListener   setInterval  frameLoaded     50       function frameLoaded         var frame      iframe   get 0       if  frame    null            var frmHead     frame  contents   find  head            if  frmHead    null                clearInterval frameListener      stop the listener             frmHead append    style  link rel stylesheet    clone        clone existing css link               frmHead append     lt link  gt      rel   stylesheet   href    styles style css   type   text css          or create css link yourself                    lt  script gt       and jQuery link    lt script src  https   ajax aspnetcdn com ajax jQuery jquery-1 9 1 min js  type  text javascript  gt  lt  script gt

User · Answer

An iframe is universally handled like a different HTML page by most browsers  If you want to apply the same stylesheet to the content of the iframe  just reference it from the pages used in there

User · Answer

You will not be able to style the contents of the iframe this way  My suggestion would be to use serverside scripting  PHP  ASP  or a Perl script  or find an online service that will convert a feed to JavaScript code  The only other way to do it would be if you can do a serverside include

User · Answer

Here  There are two things inside the domain   iFrame Section Page Loaded inside the iFrame   So you want to style those two sections as follows   1  Style for the iFrame Section  It can style using CSS with that respected id or class name  You can just style it in your parent Style sheets also    lt style gt   my iFrame  height  300px  width  100   position absolute  top 0  left 0  border  1px black solid     lt  style gt    lt iframe name  iframe1  id  my iFrame  src     cellspacing  0  gt  lt  iframe gt    2  Style the Page Loaded inside the iFrame  This Styles can be loaded from the parent page with the help of Javascript  var cssFile    document createElement  link    cssFile rel     stylesheet    cssFile type    text css    cssFile href    iFramePage css      then set that CSS file to the respected iFrame section    to Load in the Body Part frames  my iFrame   document body appendChild cssFile      to Load in the Head Part frames  my iFrame   document head appendChild cssFile       Here  You can edit the Head Part of the Page inside the iFrame using this way also  var  iFrameHead       my iFrame   contents   find  head     iFrameHead append         lt link  gt            rel   stylesheet          href  urlPath         type   text css

User · Answer

As many answers are written for the same domains  I ll write how to do this in cross domains   First  you need to know the Post Message API  We need a messenger to communicate between two windows   Here s a messenger I created          Creates a messenger between two windows     which have two different domains     class CrossMessenger                            param  object  otherWindow - window object of the other         param  string  targetDomain - domain of the other window         param  object  eventHandlers - all the event names and handlers             constructor otherWindow  targetDomain  eventHandlers                 this otherWindow   otherWindow          this targetDomain   targetDomain          this eventHandlers   eventHandlers           window addEventListener  message    e    gt  this receive call this  e               post event  data             try                  data obj should have event name             var json   JSON stringify                   event                  data                             this otherWindow postMessage json  this targetDomain              catch  e                receive e            var json          try               json   JSON parse e data   e data                    catch  e                return                    var eventName   json event              data   json data           if  e origin     this targetDomain              return           if  typeof this eventHandlers eventName       function                this eventHandlers eventName  data              Using this in two windows to communicate can solve your problem   In the main windows   var msger   new CrossMessenger iframe contentWindow   https   iframe s domain     var cssContent   Array prototype map call yourCSSElement sheet cssRules  css text  join   n    msger post  cssContent        css  cssContent      Then  receive the event from the Iframe   In the Iframe   var msger   new CrossMessenger window parent   https   parent window domain         cssContent   data    gt            var cssElem   document createElement  style            cssElem innerHTML   data css          document head appendChild cssElem              See the Complete  Javascript and Iframes tutorial for more details

User · Answer

I think the easiest way is to add another div  in the same place as the iframe  then   make its z-index bigger than the iframe container  so you can easly just style your own div  If you need to click on it  just use pointer-events none on your own div  so the iframe would be working in case you need to click on it     I hope It will help someone

User · Answer

If you want to reuse CSS and JavaScript from the main page maybe you should consider replacing  lt IFRAME gt  with a Ajax loaded content  This is more SEO friendly now when search bots are able to execute JavaScript   This is jQuery example that includes another html page into your document  This is much more SEO friendly than iframe  In order to be sure that the bots are not indexing the included page just add it to disallow in robots txt   lt html gt     lt header gt       lt script src   js jquery js  type  text javascript  gt  lt  script gt     lt  header gt     lt body gt       lt div id  include-from-outside  gt  lt  div gt       lt script type  text javascript  gt            include-from-outside   load  http   example com included html         lt  script gt      lt  body gt   lt  html gt    You could also include jQuery directly from Google  http   code google com apis ajaxlibs documentation  - this means optional auto-inclusion of newer versions and some significant speed increase  Also  means that you have to trust them for delivering you just the jQuery

User · Answer

As many answers are written for the same domains  I ll write how to do this in cross domains   First  you need to know the Post Message API  We need a messenger to communicate between two windows   Here s a messenger I created          Creates a messenger between two windows     which have two different domains     class CrossMessenger                            param  object  otherWindow - window object of the other         param  string  targetDomain - domain of the other window         param  object  eventHandlers - all the event names and handlers             constructor otherWindow  targetDomain  eventHandlers                 this otherWindow   otherWindow          this targetDomain   targetDomain          this eventHandlers   eventHandlers           window addEventListener  message    e    gt  this receive call this  e               post event  data             try                  data obj should have event name             var json   JSON stringify                   event                  data                             this otherWindow postMessage json  this targetDomain              catch  e                receive e            var json          try               json   JSON parse e data   e data                    catch  e                return                    var eventName   json event              data   json data           if  e origin     this targetDomain              return           if  typeof this eventHandlers eventName       function                this eventHandlers eventName  data              Using this in two windows to communicate can solve your problem   In the main windows   var msger   new CrossMessenger iframe contentWindow   https   iframe s domain     var cssContent   Array prototype map call yourCSSElement sheet cssRules  css text  join   n    msger post  cssContent        css  cssContent      Then  receive the event from the Iframe   In the Iframe   var msger   new CrossMessenger window parent   https   parent window domain         cssContent   data    gt            var cssElem   document createElement  style            cssElem innerHTML   data css          document head appendChild cssElem              See the Complete  Javascript and Iframes tutorial for more details

User · Answer

There is a wonderful script that replaces a node with an iframe version of itself  CodePen Demo    Usage Examples      Single node var component   document querySelector   component    var iframe   iframify component       Collection of nodes var components   document querySelectorAll   component    var iframes   Array prototype map call components  function  component      return iframify component               With options var component   document querySelector   component    var iframe   iframify component      headExtra    lt style gt  component   color  red    lt  style gt      metaViewport    lt meta name  viewport  content  width device-width  gt

User · Answer

Edit  This does not work cross domain unless the appropriate CORS header is set   There are two different things here  the style of the iframe block and the style of the page embedded in the iframe  You can set the style of the iframe block the usual way    lt iframe name  iframe1  id  iframe1  src  empty htm           frameborder  0  border  0  cellspacing  0          style  border-style  none width  100   height  120px   gt  lt  iframe gt    The style of the page embedded in the iframe must be either set by including it in the child page    lt link type  text css  rel  Stylesheet  href  Style simple css    gt    Or it can be loaded from the parent page with Javascript   var cssLink   document createElement  link    cssLink href    style css    cssLink rel    stylesheet    cssLink type    text css    frames  iframe1   document head appendChild cssLink

User · Answer

If the content of the iframe is not completely under your control or you want to access the content from different pages with different styles you could try manipulating it using JavaScript   var frm   frames  frame   document  var otherhead   frm getElementsByTagName  head   0   var link   frm createElement  link    link setAttribute  rel    stylesheet    link setAttribute  type    text css    link setAttribute  href    style css    otherhead appendChild link     Note that depending on what browser you use this might only work on pages served from the same domain

User · Answer

As an alternative  you can use CSS-in-JS technology  like below lib   https   github com cssobj cssobj  It can inject JS object as CSS to iframe  dynamically

User · Answer

The following worked for me   var iframe   top frames name  document  var css                    lt style type  text css  gt                body margin 0 padding 0 background transparent                 lt  style gt    iframe open    iframe write css   iframe close

User · Answer

If you control the page in the iframe  as hangy said  the easiest approach is to create a shared CSS file with common styles  then just link to it from your html pages   Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe   This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks   This tutorial may provide you with more information on scripting iframes in general   About cross frame scripting explains the security restrictions from the IE perspective

User · Answer

var  head       eFormIFrame   contents   find  head      head append     lt link  gt          rel   stylesheet       href  url      type   text css

User · Answer

I found another solution to put the style in the main html like this   lt style id  iframestyle  gt      html           color  white          background  black         lt  style gt   lt style gt      html           color  initial          background  initial            iframe           border  none         lt  style gt    and then in iframe do this  see the js onload    lt iframe  onload  iframe document head appendChild ifstyle   name  log  src   upgrading log  gt  lt  iframe gt    and in js   lt script gt      ifstyle   document getElementById  iframestyle       iframe   top frames  log     lt  script gt    It may not be the best solution  and it certainly can be improved  but it is another option if you want to keep a  style  tag in parent window

User · Answer

Other answers here seem to use jQuery and CSS links   This code uses vanilla JavaScript  It creates a new  lt style gt  element  It sets the text content of that element to be a string containing the new CSS  And it appends that element directly to the iframe document s head    var iframe   document getElementById  the-iframe    var style   document createElement  style    style textContent       some-class-name           some-style-name  some-value              iframe contentDocument head appendChild style

User · Answer

Edit  This does not work cross domain unless the appropriate CORS header is set   There are two different things here  the style of the iframe block and the style of the page embedded in the iframe  You can set the style of the iframe block the usual way    lt iframe name  iframe1  id  iframe1  src  empty htm           frameborder  0  border  0  cellspacing  0          style  border-style  none width  100   height  120px   gt  lt  iframe gt    The style of the page embedded in the iframe must be either set by including it in the child page    lt link type  text css  rel  Stylesheet  href  Style simple css    gt    Or it can be loaded from the parent page with Javascript   var cssLink   document createElement  link    cssLink href    style css    cssLink rel    stylesheet    cssLink type    text css    frames  iframe1   document head appendChild cssLink

User · Answer

We can insert style tag into iframe   lt style type  quot text css quot  id  quot cssID quot  gt   className       background-color  red     lt  style gt    lt iframe id  quot iFrameID quot  gt  lt  iframe gt    lt script type  quot text javascript quot  gt        function                 quot  iFrameID quot   contents   find  quot head quot   0  appendChild cssID             Or    quot  iFrameID quot   contents   find  quot head quot   0  appendChild     cssID   0             lt  script gt

User · Answer

As an alternative  you can use CSS-in-JS technology  like below lib   https   github com cssobj cssobj  It can inject JS object as CSS to iframe  dynamically

User · Answer

The above with a little change works   var cssLink   document createElement  link    cssLink href    pFstylesEditor css    cssLink rel    stylesheet    cssLink type    text css       Instead of this   frames  frame1   document body appendChild cssLink     Do this  var doc document getElementById  edit   contentWindow document     If you are doing any dynamic writing do that first doc open    doc write myData   doc close       Then append child doc body appendChild cssLink     Works fine with ff3 and ie8 at least

User · Answer

x000D   x000D  var link1   document createElement  link    x000D      link1 type    text css   x000D      link1 rel    stylesheet   x000D      link1 href          assets css normalize css   x000D  window frames  richTextField   document body appendChild link1   x000D   x000D   x000D

User · Answer

Edit  This does not work cross domain unless the appropriate CORS header is set   There are two different things here  the style of the iframe block and the style of the page embedded in the iframe  You can set the style of the iframe block the usual way    lt iframe name  iframe1  id  iframe1  src  empty htm           frameborder  0  border  0  cellspacing  0          style  border-style  none width  100   height  120px   gt  lt  iframe gt    The style of the page embedded in the iframe must be either set by including it in the child page    lt link type  text css  rel  Stylesheet  href  Style simple css    gt    Or it can be loaded from the parent page with Javascript   var cssLink   document createElement  link    cssLink href    style css    cssLink rel    stylesheet    cssLink type    text css    frames  iframe1   document head appendChild cssLink

User · Answer

The following worked for me   var iframe   top frames name  document  var css                    lt style type  text css  gt                body margin 0 padding 0 background transparent                 lt  style gt    iframe open    iframe write css   iframe close

User · Answer

If you control the page in the iframe  as hangy said  the easiest approach is to create a shared CSS file with common styles  then just link to it from your html pages   Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe   This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks   This tutorial may provide you with more information on scripting iframes in general   About cross frame scripting explains the security restrictions from the IE perspective

User · Answer

If you control the page in the iframe  as hangy said  the easiest approach is to create a shared CSS file with common styles  then just link to it from your html pages   Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe   This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks   This tutorial may provide you with more information on scripting iframes in general   About cross frame scripting explains the security restrictions from the IE perspective

User · Answer

Here is how to apply CSS code directly without using  lt link gt  to load an extra stylesheet    var head   jQuery   iframe   contents   find  head    var css     lt style type  text css  gt                 banner display none                   lt  style gt    jQuery head  append css     This hides the banner in the iframe page  Thank you for your suggestions

User · Answer

Expanding on the above jQuery solution to cope with any delays in loading the frame contents      iframe   each function        function injectCSS             iframe contents   find  head   append                  lt link  gt      rel   stylesheet   href   iframe css   type   text css                           var  iframe     this        iframe on  load   injectCSS       injectCSS

User · Answer

This is just a concept  but don t implement this without security checks and filtering  Otherwise script could hack your site   Answer  if you control target site  you can setup the receiver script like   1  set the iframe link with style parameter  like   http   your site com target php color red    the last phrase is a color red   encoded by urlencode function   2  set the receiver page target php like this    lt head gt              col   FILTER VAR SANITIZE STRING    GET  color      lt style gt  xyz color   lt  php echo  in array   col    red   yellow   green       col    black      gt     lt  style gt

User · Answer

An iframe is universally handled like a different HTML page by most browsers  If you want to apply the same stylesheet to the content of the iframe  just reference it from the pages used in there

User · Answer

When you say  doc open    it means you can write whatever HTML tag inside the iframe  so you should write all the basic tags for the HTML page and if you want to have a CSS link in your iframe head just write an iframe with CSS link in it  I give you an example   doc open     doc write   lt  DOCTYPE html gt  lt html gt  lt head gt  lt meta charset  utf-8   gt  lt meta http-quiv  Content-Type  content  text html  charset utf-8   gt  lt title gt Print Frame lt  title gt  lt link rel  stylesheet  type  text css  href   css print css   gt  lt  head gt  lt body gt  lt table id      gridId    Printable       class  print   gt     out     lt  table gt  lt  body gt  lt  html gt      doc close

User · Answer

There is a wonderful script that replaces a node with an iframe version of itself  CodePen Demo    Usage Examples      Single node var component   document querySelector   component    var iframe   iframify component       Collection of nodes var components   document querySelectorAll   component    var iframes   Array prototype map call components  function  component      return iframify component               With options var component   document querySelector   component    var iframe   iframify component      headExtra    lt style gt  component   color  red    lt  style gt      metaViewport    lt meta name  viewport  content  width device-width  gt

User · Answer

If the content of the iframe is not completely under your control or you want to access the content from different pages with different styles you could try manipulating it using JavaScript   var frm   frames  frame   document  var otherhead   frm getElementsByTagName  head   0   var link   frm createElement  link    link setAttribute  rel    stylesheet    link setAttribute  type    text css    link setAttribute  href    style css    otherhead appendChild link     Note that depending on what browser you use this might only work on pages served from the same domain

User · Answer

If you control the page in the iframe  as hangy said  the easiest approach is to create a shared CSS file with common styles  then just link to it from your html pages   Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe   This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks   This tutorial may provide you with more information on scripting iframes in general   About cross frame scripting explains the security restrictions from the IE perspective

User · Answer

Expanding on the above jQuery solution to cope with any delays in loading the frame contents      iframe   each function        function injectCSS             iframe contents   find  head   append                  lt link  gt      rel   stylesheet   href   iframe css   type   text css                           var  iframe     this        iframe on  load   injectCSS       injectCSS

User · Answer

If you want to reuse CSS and JavaScript from the main page maybe you should consider replacing  lt IFRAME gt  with a Ajax loaded content  This is more SEO friendly now when search bots are able to execute JavaScript   This is jQuery example that includes another html page into your document  This is much more SEO friendly than iframe  In order to be sure that the bots are not indexing the included page just add it to disallow in robots txt   lt html gt     lt header gt       lt script src   js jquery js  type  text javascript  gt  lt  script gt     lt  header gt     lt body gt       lt div id  include-from-outside  gt  lt  div gt       lt script type  text javascript  gt            include-from-outside   load  http   example com included html         lt  script gt      lt  body gt   lt  html gt    You could also include jQuery directly from Google  http   code google com apis ajaxlibs documentation  - this means optional auto-inclusion of newer versions and some significant speed increase  Also  means that you have to trust them for delivering you just the jQuery

User · Answer

x000D   x000D  var link1   document createElement  link    x000D      link1 type    text css   x000D      link1 rel    stylesheet   x000D      link1 href          assets css normalize css   x000D  window frames  richTextField   document body appendChild link1   x000D   x000D   x000D

User · Answer

I met this issue with Google Calendar  I wanted to style it on a darker background and change font   Luckily  the URL from the embed code had no restriction on direct access  so by using PHP function file get contents it is possible to get the  entire content from the page  Instead of calling the Google URL  it is possible to call a php file located on your server  ex  google php  which will contain the original content with modifications    content   file get contents  https   www google com calendar embed src  23contacts 40group v calendar google com amp ctz America Montreal      Adding the path to your stylesheet    content   str replace   lt  head gt     lt link rel  stylesheet  href  http   www yourwebsiteurl com google css    gt  lt  head gt     content      This will place your stylesheet last just before the head end tag    Specify the base url form the original url in case css and js are called relatively    content   str replace   lt  title gt     lt  title gt  lt base href  https   www google com calendar     gt     content     The final google php file should look like this    lt  php  content   file get contents  https   www google com calendar embed src  23contacts 40group v calendar google com amp ctz America Montreal     content   str replace   lt  title gt     lt  title gt  lt base href  https   www google com calendar     gt     content    content   str replace   lt  head gt     lt link rel  stylesheet  href  http   www yourwebsiteurl com google css    gt  lt  head gt     content   echo  content    Then you change the iframe embed code to    lt iframe src  http   www yourwebsiteurl com google php  style  border  0  width  800  height  600  frameborder  0  scrolling  no  gt  lt  iframe gt    Good luck

User · Answer

We can insert style tag into iframe   lt style type  quot text css quot  id  quot cssID quot  gt   className       background-color  red     lt  style gt    lt iframe id  quot iFrameID quot  gt  lt  iframe gt    lt script type  quot text javascript quot  gt        function                 quot  iFrameID quot   contents   find  quot head quot   0  appendChild cssID             Or    quot  iFrameID quot   contents   find  quot head quot   0  appendChild     cssID   0             lt  script gt

User · Answer

Here is how to apply CSS code directly without using  lt link gt  to load an extra stylesheet    var head   jQuery   iframe   contents   find  head    var css     lt style type  text css  gt                 banner display none                   lt  style gt    jQuery head  append css     This hides the banner in the iframe page  Thank you for your suggestions

User · Answer

Well  I have followed these steps    Div with a class to hold iframe Add iframe to the div  In CSS file     divClass   width  500px  height  500px    divClass iframe   width  100   height  100       This works in IE 6  Should work in other browsers  do check

User · Answer

I met this issue with Google Calendar  I wanted to style it on a darker background and change font   Luckily  the URL from the embed code had no restriction on direct access  so by using PHP function file get contents it is possible to get the  entire content from the page  Instead of calling the Google URL  it is possible to call a php file located on your server  ex  google php  which will contain the original content with modifications    content   file get contents  https   www google com calendar embed src  23contacts 40group v calendar google com amp ctz America Montreal      Adding the path to your stylesheet    content   str replace   lt  head gt     lt link rel  stylesheet  href  http   www yourwebsiteurl com google css    gt  lt  head gt     content      This will place your stylesheet last just before the head end tag    Specify the base url form the original url in case css and js are called relatively    content   str replace   lt  title gt     lt  title gt  lt base href  https   www google com calendar     gt     content     The final google php file should look like this    lt  php  content   file get contents  https   www google com calendar embed src  23contacts 40group v calendar google com amp ctz America Montreal     content   str replace   lt  title gt     lt  title gt  lt base href  https   www google com calendar     gt     content    content   str replace   lt  head gt     lt link rel  stylesheet  href  http   www yourwebsiteurl com google css    gt  lt  head gt     content   echo  content    Then you change the iframe embed code to    lt iframe src  http   www yourwebsiteurl com google php  style  border  0  width  800  height  600  frameborder  0  scrolling  no  gt  lt  iframe gt    Good luck

User · Answer

An iframe is universally handled like a different HTML page by most browsers  If you want to apply the same stylesheet to the content of the iframe  just reference it from the pages used in there

User · Answer

When you say  doc open    it means you can write whatever HTML tag inside the iframe  so you should write all the basic tags for the HTML page and if you want to have a CSS link in your iframe head just write an iframe with CSS link in it  I give you an example   doc open     doc write   lt  DOCTYPE html gt  lt html gt  lt head gt  lt meta charset  utf-8   gt  lt meta http-quiv  Content-Type  content  text html  charset utf-8   gt  lt title gt Print Frame lt  title gt  lt link rel  stylesheet  type  text css  href   css print css   gt  lt  head gt  lt body gt  lt table id      gridId    Printable       class  print   gt     out     lt  table gt  lt  body gt  lt  html gt      doc close

[html] How to apply CSS to iframe?

Examples related to html

Examples related to css

Examples related to iframe

Examples related to rss