0

我创建了一个小部件，其他人可以通过 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() 内部的警报使用正确的 timeToMark 触发，但元素不动画。我已将动画更改为 addClass() 只是为了尝试一下，尽管该类确实在检查器中显示为被添加，但元素本身并不反映这个添加的类。

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

谢谢

4

2 回答 2

0

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

要从 iframe 获取元素，您需要 .contants() jquery 方法，这里是演示：

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-14T22:21:33.233 回答
0

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

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

但是，您可以尝试使用 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' 来源都能够以这种方式发布消息。

高温高压

于 2012-12-14T21:54:36.463 回答