Question

希望不要因为我的菜鸟问题而得到太多抨击！： - ）

我在某种程度上喜欢如何执行以下操作的示例：

我拥有两个域名 - 域名A和域名B.

我想在域B上显示一个iframe，其中包含来自域A的页面..但是具有不同的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">')
        );
    });
});

在Cross domain iFrame中更改样式/ CSS（使用“iFrame Resizer”）

1 个答案: