Javascript 如何在iframe中添加类和/或设置元素动画

我创建了一个小部件，其他人可以通过iframe将其加载到html中。将我的自定义js文件（作为iframe src）加载到iframe中，一切正常。我还从ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js加载jquery。然后，我的自定义js使用$.get（）从与js文件位于同一域的服务器以不同的间隔加载和解析一些json。我使用json创建添加到iframe中的html元素。同样，所有这些都如预期的那样起作用

我遇到的问题是，我想为我在iframe中添加的html设置动画。我使用以下函数来处理动画：

function embeddedUnMarkAsNew($el) {
    $el.animate({color:"black"}, 500)
}

function embeddedMarkAsNew(timeToMark, $el){
    alert("marking for this time: "+timeToMark)
    //start animation
    $el.animate({color:"red"}, 500);
    //end animation when duration runs
    setTimeout(function() { 
        embeddedUnMarkAsNew($el);
    }, timeToMark)
    return false
}

embeddedMarkAsNew（）中的警报会在标记的正确时间触发，但元素不会设置动画。我已经将动画更改为addClass（），只是为了进行尝试，尽管该类确实会在添加时显示在检查器中，但元素本身并不反映该添加的类

我在iframe之外的元素上使用了这种技术。在iframe中这样做会给我带来什么问题

---

谢谢

您遇到的问题与基本浏览器安全有关

跨源脚本不能以这种方式执行，因为它会给人们带来无数的安全问题

但是，您可以使用window.postMessage尝试执行的操作

otherWindow.postMessage(message, targetOrigin);

请查看此处的文档：

基本上，该页面（iframe）中需要一个事件监听器，该监听器需要接收一条消息，其中包含与它需要执行的操作相关的数据。需要告诉它做某事的包含页面调用window.postMessage

otherWindow.postMessage(message, targetOrigin);

otherWindow可以通过执行以下JavaScript来侦听已发送的消息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

不过要小心，您需要检查event.origin以确保不仅仅是任何ol'origin能够以这种方式发布消息

---

HTH

jquery默认情况下不使用彩色动画，要使用彩色动画，您需要一个库，例如

要从iframe获取元素，需要.contants（）jquery方法是demo：

---

…对于彩色动画，你需要一个库，你用过吗？

function embeddedMarkAsNew($el,timeToMark,AnimationTime) {
    //default time is 1000
    timeToMark=timeToMark!==undefined?timeToMark:1000
    AnimationTime=AnimationTime!==undefined?AnimationTime:500;
    //start animation
    $el.animate({
        color: '#FF0000'
        }, AnimationTime)
        .delay(timeToMark)
        .animate({color: "#000000"},AnimationTime);
    return false;
}