如何在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中添加類和/或動畫元素

回答

相關問題