Question

我刚刚开始在我的工作中进一步发展我的网络开发技能并且遇到了一个小问题。

我有一个iFrame（iframe.html），在这个iframe中，div是一个绿色方块。我想使用onClick函数在我的Parent（index.html）中使用按钮更改iframe外部Div的颜色。

我尝试了一些方法，比如调用普通函数（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>

Answer 1

这可以使用DOM iframe对象的SlidingTabFragment属性：

来完成

contentDocument

或者，使用document.frames[0].contentDocument.getElementById('id here').style['background-color']=whatever;：

window.postMessage

Answer 2

添加此内容，

更新您的jQuery CDN

FunctionPass

从Parent更改iFrame中的DIV的CSS

2 个答案: