Jquery和Ajax動態加載IFrame

我有一個腳本，動態加載網頁內的iframe。您可以在這裏看到演示：DEMO Jquery和Ajax動態加載IFrame

我想使用jquery實現類似的rseult，但具有良好的滑動效果，並且在另一個div中加載iframe的外部鏈接。基本上，我在頁面上有10個鏈接。點擊鏈接時，我希望iframe窗口加載新內容並對轉換應用效果。有沒有人知道這個存在的任何插件？我沒有足夠的經驗來從頭開始編寫腳本，所以任何幫助都將非常感謝！

來源

2010-03-23 JCHASE11

改變基於評論...

鑑於像

<input type="button" value="Load Frames" id="submit" name="submit" onclick="loadFrame()" /> 
<iframe class="frameToChange" link="http://www.apple.com" style="display: none" ></iframe> 
<iframe class="frameToChange" link="http://www.google.com" style="display: none" ></iframe>

頁嘗試以下

function loadFrame() { 
    var j$ = jQuery.noConflict(); 
    var frames = j$('.frameToChange'); 

    frames.each(function(index) { 
     j$(this).slideDown('fast'); 
     j$(this).attr('src', j$(this).attr('link')); 
    }); 
}

來源

2010-03-23 16:55:11

這看起來不錯，但我怎麼會指定10周獨立的I幀的網址？最好給它一個url屬性（在HTML中），並使用jquery以iframe的形式加載url？ – JCHASE11 2010-03-23 16:56:44

@ JCHASE11，根據您的意見更新。只需添加儘可能多的iframes，class =「frameToChange」就可以，因爲你需要 – 2010-03-23 17:18:37

Chris，看起來不錯，但還不夠完美。你可以在我創建的演示頁面上看到你的代碼：http://vitaminjdesign.com/iframe/ 當按鈕被點擊時，沒有任何反應。我認爲這是因爲在你的jQuery中，它不說在哪裏加載iframe。我將創建一個名爲#test的div，我希望加載iframe。如何調整代碼以使其加載到div中？ – JCHASE11 2010-03-23 17:32:03

jQuery內置了slide效果。您可以通過使用兩個iframe（稱它們爲新舊）並使用幻燈片效果在它們之間進行轉換來實現要查找的內容。

來源

2010-03-23 16:54:21

有點像您可以使用jQuery動畫的iframe或者你可以動畫iframe的內容。

使用iframe做任何事情的缺點是它們不允許父級中的腳本與在iframe中運行的腳本進行通信。它被稱爲跨域限制，用於防止來自不同域的惡意腳本。

因此，如果您打算爲iframe的內容製作動畫，則需要將動畫實現爲加載到iframe中的頁面的一部分。否則，要爲iframe本身設置動畫效果，jQuery已經具備了一些基本的動畫功能，這些功能被描述爲here。

來源

2010-03-23 16:59:13 Roman

在這一點上，動畫是次要的功能。雖然很高興知道！ – JCHASE11 2010-03-23 17:04:19

這不一定是真的，如果父級和iframe都在同一個域上，他們可以互相交互。此外，如果iFrame從同一站點的子域中獲取內容，則可以通過執行document.domain ='mydomain.com'來強制該域與父域相同以匹配父域。 – Sam 2010-03-23 17:06:25

好點。 iframe將與靜態頁面位於同一個域（子域），因此我可以爲其設置動畫效果！ – JCHASE11 2010-03-23 17:09:12

我使用以下命令：

$('iframe').load(function() { 
    $(this).animate({ 
     'height': this.contentWindow.document.body.scrollHeight + 'px' 
    }); 
});

來源

2010-03-23 17:03:54 Sam

Jquery和Ajax動態加載IFrame

回答

相關問題