在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

让我们一步步来实现在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div，不改变iframe父窗口代码。

首先，我们需要在iframe里的页面编写js，并且通过iframe的parent对象进行与父窗口的交互。以下是大致的步骤：

1. 在iframe页面中编写HTML代码和JS代码，创建一个可以进行展开和收缩的div，并设置好div的初始状态样式及控制展开和收缩的JS函数。
   例如：

<div id="slideToggle" style="height:100px;background-color:red">
    <a href="#" onclick="toggleDiv()">Expand/Collapse</a>
    <p>Some content goes here...</p>
</div>

<script>
function toggleDiv() {
    var div = document.getElementById("slideToggle");
    if (div.style.height === "" || div.style.height === "0px") {
        div.style.height = "100px";
    } else {
        div.style.height = "0px";
    }
}
</script>

1. 编写JS代码，利用parent对象来实现在父窗口上创建动画效果展开和收缩的div。
   例如：

function toggleDiv() {
    var div = document.getElementById("slideToggle");
    if (div.style.height === "" || div.style.height === "0px") {
        div.style.height = "100px";
        parent.postMessage("expand", "*"); // 向父窗口发送expand消息
    } else {
        div.style.height = "0px";
        parent.postMessage("collapse", "*"); // 向父窗口发送collapse消息
    }
}

1. 在父窗口中创建一个监听消息的函数，并根据收到的消息来进行动画效果的展开和收缩。
   例如：

window.addEventListener("message", function(event) {
    if (event.data === "expand") {
        $("#slideToggle").slideDown();
    } else if (event.data === "collapse") {
        $("#slideToggle").slideUp();
    }
});

接下来，举两个完整的示例说明：

示例一：

在iframe里的页面中新建了一个按钮，通过点击这个按钮实现了在父窗口上创建动画效果展开和收缩的div。

在iframe里的页面中加入了如下代码：

<button onclick="toggle()">Toggle in parent window</button>

function toggle() {
    parent.postMessage("toggle", "*");
}

父窗口中监听消息的代码：

window.addEventListener("message", function(event) {
    if (event.data === "toggle") {
        $("#slideToggle").slideToggle();
    }
});

在此示例中，点击iframe页面中的按钮，触发 toggle() 函数，向父窗口发送 toggle 消息，父窗口中的监听消息的函数接收到消息后，通过 slideToggle() 函数实现了动画效果的展开和收缩。

示例二：

在iframe里的页面中添加了一个定时器，每隔5秒钟就向父窗口发送一次 expand 消息。

在iframe里的页面中加入了如下代码：

setInterval(function() {
    parent.postMessage("expand", "*");
}, 5000);

父窗口中监听消息的代码：

window.addEventListener("message", function(event) {
    if (event.data === "expand") {
        $("#slideToggle").slideDown();
    } else if (event.data === "collapse") {
        $("#slideToggle").slideUp();
    }
});

在此示例中，定时器会每隔5秒钟向父窗口发送一次 expand 消息，父窗口中的监听消息的函数接收到消息后，通过 slideDown() 函数实现了动画效果的展开和收缩。可以通过修改定时器的时间间隔和消息类型来实现不同的功能需求，例如定时向父窗口发送更新数据请求等。