javascript - 在跨域 iFrame 中更改样式/CSS(使用 "iFrame Resizer")

Question

希望不要因为我的菜鸟问题而受到太多批评! :-)

我非常喜欢一个如何执行以下操作的示例:

我拥有两个域 - 域 A 和域 B。

我想在域 B 上使用来自域 A 的页面显示 iframe ..但使用不同的 CSS(删除页眉、页脚等)

目前，我正在使用“Iframe Resizer”(https://github.com/davidjbradshaw/iframe-resizer)自动调整域 B 上的 iframe。效果很好!

我无法掌握从域 A 发送不同的样式或修改域 B 上的 iFrame 中的样式。

这是我当前在域 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 -->

..这是我目前在域 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 -->

提前非常感谢任何可以帮助我解决这段(很可能)简单代码的人! :-)

Answer 1

在 domainB 上创建一个样式表，它只包含您要使用的 iframe 的样式，然后使用 jQuery 将其附加到您的 iframe。

代码:

 $(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">')
        );
    });
});