Question

我创建了一个小部件，其他人可以通过iframe加载到他们的html中。一切正常，可以将我的自定义js文件（作为iframe src）加载到iframe中。我也从ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js加载jquery。我的自定义js然后以与js文件相同的域中的服务器以$ .get（）的不同间隔加载和解析一些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（）内部的警报会使用正确的timeToMark触发，但该元素不会生成动画。我已经将动画更改为addClass（）只是为了尝试它，虽然该类确实在检查器中显示为添加，但元素本身并不反映这个添加的类。

我在iframe之外的元素上使用了这种技术。在导致我出问题的iframe中执行此操作是什么？

由于

Answer 1

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

交叉源脚本不能以这种方式执行，因为它会打开人们无数的安全问题。

但是，您可以使用window.postMessage。

请查看此处的文档：https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

基本上，您需要在该页面（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'来源能够以这种方式发布消息。

HTH

Answer 2

默认情况下jquery不能使用颜色动画，要使用颜色动画，你需要一个像bitstorm color animation jquery plugin这样的库

要从iframe获取元素，你需要.contants（）jquery方法here是演示：

function embeddedMarkAsNew(timeToMark, $el) {
    // alert("marking for this time: "+timeToMark)
    //start animation
    $el.animate({
        color: '#FF0000'
        }, 500)
        .delay(timeToMark)
        .animate({color: "#000000"},500);
    return false
}

function demo_fill_iframe() {
        var iframe=$('#iframe').contents().find('body');
        iframe.append($('<div id="test">').text('TEXT'));
}
//create div in iframe
demo_fill_iframe();


//run function!
embeddedMarkAsNew(10000,$('#iframe').contents().find('#test'));
embeddedMarkAsNew(1000,$('#test2'));

因为你看到iframe中的动画没有变化。还请注意，我使用delay()而不是调用具有以下优势的子功能 - delay将等待第一个动画结束，然后运行第二个，如果你只需要改变颜色，{{1}是最好的选择。另外我想在功能中交换参数顺序，这样你就可以跳过第二个选项并将其设置为默认值：

delay

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

2 个答案: