Loading ...
Sorry, an error occurred while loading the content.
 

YUI StyleSheet Utility 2.7.0 Beta to work with iframes

Expand Messages
  • pekka.vorne
    I have page.xhtml and iframe.xhtml . The iframe.xhtml is included to page.xhtml using an iframe element. The problem is that I can t instantiate
    Message 1 of 6 , Mar 11, 2009
      I have "page.xhtml" and "iframe.xhtml". The "iframe.xhtml" is included to "page.xhtml" using an iframe element.

      The problem is that I can't instantiate YAHOO.util.StyleSheet in "page.xhtml" so that it can edit CSS rules in "iframe.xhtml".

      A partial solution I have found is to instantiate YAHOO.util.StyleSheet in the "iframe.xhtml", and use it from the "page.xhtml":

      // Getting YUI StyleSheet object from the iframe.
      var testStyleSheet = document.getElementById('iframe_with_js').contentWindow['iframeStyleSheet'];
      testStyleSheet.set("p.iframe_text", {backgroundColor : "yellow"});

      Here is the partial solution, which works with Mozilla Firefox 3.0.6:
      http://koti.mbnet.fi/vorne/yuicase/page.xhtml

      And here you can download it as a zipped archive:
      http://koti.mbnet.fi/vorne/yuicase.zip

      Does anyone have any idea how to use YAHOO.util.StyleSheet with iframes?

      --
      Pekka Vorne
    • Lucas Smith
      ... Pekka, You should be able to construct the StyleSheet passing a node reference from a style element in the iframe. Would this suffice? Luke
      Message 2 of 6 , Mar 11, 2009
        --- In ydn-javascript@yahoogroups.com, "pekka.vorne" <pekka.vorne@...> wrote:
        >
        > I have "page.xhtml" and "iframe.xhtml". The "iframe.xhtml" is included to "page.xhtml" using an iframe element.
        >
        > The problem is that I can't instantiate YAHOO.util.StyleSheet in "page.xhtml" so that it can edit CSS rules in "iframe.xhtml".
        >
        > A partial solution I have found is to instantiate YAHOO.util.StyleSheet in the "iframe.xhtml", and use it from the "page.xhtml":
        >
        > // Getting YUI StyleSheet object from the iframe.
        > var testStyleSheet = document.getElementById('iframe_with_js').contentWindow['iframeStyleSheet'];
        > testStyleSheet.set("p.iframe_text", {backgroundColor : "yellow"});
        >
        > Here is the partial solution, which works with Mozilla Firefox 3.0.6:
        > http://koti.mbnet.fi/vorne/yuicase/page.xhtml
        >
        > And here you can download it as a zipped archive:
        > http://koti.mbnet.fi/vorne/yuicase.zip
        >
        > Does anyone have any idea how to use YAHOO.util.StyleSheet with iframes?
        >
        > --
        > Pekka Vorne
        >

        Pekka,

        You should be able to construct the StyleSheet passing a node reference from a style element in the iframe.

        Would this suffice?

        Luke
      • pekka.vorne
        ... Thank you for your advice, but the node reference solution doesn t seem to work or I just did something wrong: var documentIframe =
        Message 3 of 6 , Mar 13, 2009
          > You should be able to construct the StyleSheet passing a node reference from a style element in the iframe.
          >
          > Would this suffice?
          >
          > Luke

          Thank you for your advice, but the node reference solution doesn't seem to work or I just did something wrong:

          var documentIframe = document.getElementById('iframe').contentDocument; // Document iframe.xhtml
          var link = documentIframe.getElementById('iframestyle'); // link#iframestyle
          var iframeStyleSheet = YAHOO.util.StyleSheet(link); // Crash!
          iframeStyleSheet.set("p.text", {backgroundColor : "blue"});

          The code above can be tested from URL:
          http://koti.mbnet.fi/vorne/yuicase2/page.xhtml

          The crash happens in file "http://yui.yahooapis.com/2.7.0/build/stylesheet/stylesheet.js" at line 188:

          // 3. Initialize the cssRules map from the node
          // xdomain link nodes forbid access to the cssRules collection, so this
          // will throw an error.
          // TODO: research alternate stylesheet, @media
          for (i = sheet[_rules].length - 1; i >= 0; --i) {

          I guess there is explanation why the exception is thrown, but I haven't figured out how to fix my code yet.

          --
          Pekka Vorne
        • Lucas Smith
          ... And the link node in the iframe document is from the same origin? I was recommending you seed from a style node, not a link node, so as to avoid this
          Message 4 of 6 , Mar 13, 2009
            --- In ydn-javascript@yahoogroups.com, "pekka.vorne" <pekka.vorne@...> wrote:
            >
            > > You should be able to construct the StyleSheet passing a node reference from a style element in the iframe.
            > >
            > > Would this suffice?
            > >
            > > Luke
            >
            > Thank you for your advice, but the node reference solution doesn't seem to work or I just did something wrong:
            >
            > var documentIframe = document.getElementById('iframe').contentDocument; // Document iframe.xhtml
            > var link = documentIframe.getElementById('iframestyle'); // link#iframestyle
            > var iframeStyleSheet = YAHOO.util.StyleSheet(link); // Crash!
            > iframeStyleSheet.set("p.text", {backgroundColor : "blue"});
            >
            > The code above can be tested from URL:
            > http://koti.mbnet.fi/vorne/yuicase2/page.xhtml
            >
            > The crash happens in file "http://yui.yahooapis.com/2.7.0/build/stylesheet/stylesheet.js" at line 188:
            >
            > // 3. Initialize the cssRules map from the node
            > // xdomain link nodes forbid access to the cssRules collection, so this
            > // will throw an error.
            > // TODO: research alternate stylesheet, @media
            > for (i = sheet[_rules].length - 1; i >= 0; --i) {
            >
            > I guess there is explanation why the exception is thrown, but I haven't figured out how to fix my code yet.
            >
            > --
            > Pekka Vorne
            >

            And the link node in the iframe document is from the same origin? I was recommending you seed from a style node, not a link node, so as to avoid this problem. If needs be, create a style node and attach it to the head of the iframe document via js first.

            var s = documentIframe.createElement('style');
            s.type = 'text/css';
            documentIframe.getElementsByTagName('head')[0].appendChild(s);

            var iframeStyleSheet = YAHOO.util.StyleSheet(s);

            Hope this helps,
            Luke
          • pekka.vorne
            ... It didn t help either, or I just did something badly wrong. The YUI StyleSheet Utility is still a beta version, I hope the issue with iframes will be
            Message 5 of 6 , Mar 31, 2009
              > And the link node in the iframe document is from the same origin? I was recommending you seed from a style node, not a link node, so as to avoid this problem. If needs be, create a style node and attach it to the head of the iframe document via js first.
              >
              > var s = documentIframe.createElement('style');
              > s.type = 'text/css';
              > documentIframe.getElementsByTagName('head')[0].appendChild(s);
              >
              > var iframeStyleSheet = YAHOO.util.StyleSheet(s);
              >
              > Hope this helps,
              > Luke

              It didn't help either, or I just did something badly wrong.

              The YUI StyleSheet Utility is still a beta version, I hope the issue with iframes will be fixed.. or someone has time to make an example with an iframe for dummies like me. :)

              --
              Pekka Vorne
            • Lucas Smith
              ... Arg, you got me. It was checking the style element s parent to make sure it was the head *of the current document*. I ve filed a bug here
              Message 6 of 6 , Mar 31, 2009
                --- In ydn-javascript@yahoogroups.com, "pekka.vorne" <pekka.vorne@...> wrote:
                >
                > > And the link node in the iframe document is from the same origin? I was recommending you seed from a style node, not a link node, so as to avoid this problem. If needs be, create a style node and attach it to the head of the iframe document via js first.
                > >
                > > var s = documentIframe.createElement('style');
                > > s.type = 'text/css';
                > > documentIframe.getElementsByTagName('head')[0].appendChild(s);
                > >
                > > var iframeStyleSheet = YAHOO.util.StyleSheet(s);
                > >
                > > Hope this helps,
                > > Luke
                >
                > It didn't help either, or I just did something badly wrong.
                >
                > The YUI StyleSheet Utility is still a beta version, I hope the issue with iframes will be fixed.. or someone has time to make an example with an iframe for dummies like me. :)
                >
                > --
                > Pekka Vorne
                >


                Arg, you got me. It was checking the style element's parent to make sure it was the head *of the current document*. I've filed a bug here
                http://yuilibrary.com/projects/yui2/ticket/2527873

                and checked in the fix. Sadly, it's nothing you can patch onto the 2.7 code because it's in the constructor, but you can download the updated file directly from github
                http://github.com/yui/yui2/tree/master under /build/stylesheet/

                Thanks for finding this!

                Luke
              Your message has been successfully submitted and would be delivered to recipients shortly.