Change styling / CSS in Cross domain iFrame (using “iFrame Resizer”)

Question

Hope not to get too much flak for my noob question! :-)

I would reeeeeally like an example of how to do the following:

I own two domains - domain A and domain B.

I'd like to display an iframe on domain B with a page from domain A ..but with different CSS (removing header, footer etc.)

At the moment I am using "Iframe Resizer" ( https://github.com/davidjbradshaw/iframe-resizer ) to automatically fit the iframe on domain B. This works great!

I just can't get a grip on either SENDING different styling from domain A or on MODIFYING the styling in the iFrame on domain B.

This is the code I currnetly have on domain A:

<!-- Scripts for resizing iFrame SEND -->

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.contentWindow.min.js" defer></script>

    <script>

        //EITHER A TRIGGER OR A MESSAGE CONTAINING CSS TO SEND TO DOMAIN B...

    </script>

<!-- Scripts for resizing iFrame SEND -->

..and this is the code I currently have on domain B:

    <!-- Scripts for resizing iFrame RECIEVE -->

        <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.min.js"></script>

        <iframe style="border: none;" id="asc" src="http://domainA.com/example" width="100%" scrolling="no"></iframe>

        <script>

            iFrameResize({log:false}, '#asc')

            //A RECEIVER FOR THE TRIGGER / CSS FROM DOMAIN A RESULTING IN MODIFIED STYLING OF THE IFRAME CONTENT

        </script>

    <!-- Scripts for resizing iFrame RECIEVE -->

Thanks a zillion in advance to anyone who can help me out with this (most likely) simple piece of code! :-)

Answer 1

Create a stylesheet on domainB that has styles only for the iframe that you want to use and then append it to your iframe with jQuery.

Code:

 $(document).ready(function(){
    $('#iframeFromDomainA').load(function(){
        $('#iframeFromDomainA')
            .contents().find("head")
            .append($('<link rel="stylesheet" type="text/css" href="https://www.domainb.com/css/styleforiframeonwebsiteb.css">')
        );
    });
});