从父级更改 iFrame 中 DIV 的 CSS答案

【问题标题】：Change the CSS of a DIV in an iFrame from Parent从父级更改 iFrame 中 DIV 的 CSS
【发布时间】：2016-09-25 19:33:17
【问题描述】：

我刚刚开始在我的工作中进一步提高我的 Web 开发技能，但遇到了一个小问题。

我有一个 iFrame (iframe.html)，在这个 iframe 中有一个 div，样式为绿色方块。我想用我的父级（index.html）中的一个按钮来改变 iframe 外的 Div 的颜色，并带有一个 onClick 函数。

我尝试了一些方法，例如调用普通函数（document.getElementById 等）。但没有什么真正奏效。所以我想，那个 jquery 可能有一些解决方案，我现在被困在这段代码中，但它不起作用。

谁能帮忙？

PS：这不是跨域案例。我在同一个目录中获得了两个 html 文件。

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="jquery-1.12.2.min.js"></script>

        <title>buttonframetest</title>
        <script type="text/javascript">
            function Clickit() {
                 $(document).ready(function(){
            $('iframe').contents().find('background-color').css('backgroundColor', 'white');
            });
            }

        </script>

    </head>
    <body>
        <iframe id="iframe" src="iframe.html" width="500px;" height="500px">
        <p>iFrame nicht darstellbar in deinem Browser</p>
        </iframe>
        <br>
        <button type='button' onClick="Clickit();">Klick</button>
        <button type="button" onclick="redy">CHANGE</button>
        <br>
        <div class="ChangeColor"></div>


        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

【问题讨论】：

在此处或小提琴中添加剩余的代码。
@frnt 刚刚编辑了我的帖子

标签： javascript jquery html css iframe

【解决方案1】：

这可以通过 DOM iframe 对象的 contentDocument 属性来完成：

document.frames[0].contentDocument.getElementById('id here').style['background-color']=whatever;

或者，或者，使用window.postMessage：

// this is in parent
document.frames[0].postMessage('red', '*');

// this is in frame
window.onmessage = function(x) {
    if (x.origin == 'http://www.example.com') document.getElementById('id here').style['background-color'] = x.data;
}

【讨论】：

【解决方案2】：

添加这个，

更新你的 jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
function clck(){
       $(document).ready(function(){
        $('iframe').css({
        'background' : '#fff'
        });
        });
}

【讨论】：