Home/ Questions/Q 7278029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T22:49:11+00:00

I have this code to add a stylesheet to a page in a fancybox

  • 0

I have this code to add a stylesheet to a page in a fancybox iframe. Can I do the same to the parent page?

I have tried this but it didn’t work…

window.parent.changeStyles(stylesheet);

function changeStyles(styles) {
$(“”, {
rel: “stylesheet”,
type: “text/css”,
href: styles
}).appendTo(“head”);
};

            $('.change-styles').on('click',function(){                              
                var stylesheet = $(this).attr('href');
                changeStyles(stylesheet);


                return false
            });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, define a parent file:

    <html>
<head></head>
<body>
    <iframe src="iframe.html"></iframe>
</body>
</html>

    Then the iframe file as iframe.html:

    <html>
<head>

<script>

function addCSSToParent(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.type = 'text/css';
    window.parent.document.getElementsByTagName('head')[0].appendChild(link);
}

// Add some CSS
addCSSToParent('some.css');

</script>
</head>

<body>This is the iframe.</body>
</html>

    The addCSSToParent() will add a new DOM element into the head of its parent with the given URL. Make sure to run this in a server environment, because accessing the parent worked but gave a few security errors in Chrome.

    • 0