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

我已经创建了一个小部件，其他人可以通过iframe将其加载到其html中。一切工作正常，加载我的自定义js文件（iframe src）到iframe中。我还从ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js加载jquery。然后，我的自定义js加载并以与js文件相同的域中的服务器的$ .get（）以各种间隔解析某个json。我使用json创建html元素，并将其添加到iframe中。再次，所有这些都按预期工作。如何在iframe中添加类和/或动画元素

我遇到的问题是我想动画我在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（）来试用它，虽然该类在检查器中显示为添加了，但该元素本身并不反映这个添加的类。

我在iframes之外的元素上使用了这种技术。在iframe里面导致我的问题是什么？

谢谢

来源

2012-12-14 chuck w

...彩色动画，你需要一个库，你用过吗？ –

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

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

然而，你正在尝试做的事是可能的，使用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以确保不是任何醇”起源能够以这种方式发布消息。

HTH

来源

2012-12-14 21:54:36

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将等待第一个动画完成，然后运行第二个，如果你只需要改变颜色回来，delay是最好的选择。另外我想你交换的功能参数的顺序，这样你就可以跳过第二个选项并将其设置为默认：

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; 
}

来源

2012-12-14 22:21:33

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

回答

相关问题