2012-04-12 7 views
2

jquery colorboxプラグインで生成されたiframeのコンテンツに何時間もアクセスできませんでした。jqueryでiframeコンテンツにアクセスする

HERESに私のコードは:

$(".ListView li a").colorbox({ 

iframe:true, 
width: "50%", 
height: "50%", 
opacity: 0.5, 
onComplete: function() { 
alert("complete"); 
$("iframe").contents().find("p").css("color","#f00"); 
} 
}); 

これは、ファイルをロードし、それを表示します。とてもうまい。 iframeが完全にロードされると、警告メッセージもスローされます。しかし、フレーム内の要素にはjqueryセレクタでアクセスできません。 iframe内のp要素すべてに何も起こりません。

どちら

if($("iframe").contents().length > 0) 
{ 
alert("exists");  
} 

if($("iframe").length > 0) 
{ 
alert("exists");  
} 

は成功しています。ページに他のiframeはありません。また、クラス名を挿入しようとしました。

「通常の」iframeは、HTMLに直接挿入され、colorboxで生成されないため、私の関数が動作しています。

あなたは

コードが生成ありがとう:IFRAMEの内容にアクセスするためのcorssブラウザソリューションがあり

<div id="colorbox" class="" style="display: block; padding-bottom: 50px; padding-right: 50px; top: 128px; left: 476px; position: absolute; width: 902px; height: 207px;"> 
<div id="cboxWrapper" style="height: 257px; width: 952px;"> 
<div> 
<div style="clear: left;"> 
<div id="cboxMiddleLeft" style="float: left; height: 207px;"></div> 
<div id="cboxContent" style="float: left; width: 902px; height: 207px;"> 
<div id="cboxLoadedContent" style="display: block; width: 902px; overflow: auto; height: 187px;"> 
<iframe class="cboxIframe" frameborder="0" name="cbox1334265249803" src="qtest.html"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<body> 
<a href="#">Link</a> 
<p>Formatted Text</p> 
</body> 
</html> 
</iframe> 
</div> 
<div id="cboxLoadingOverlay" style="float: left; display: none;"></div> 
<div id="cboxLoadingGraphic" style="float: left; display: none;"></div> 
<div id="cboxTitle" style="float: left; display: block;"></div> 
<div id="cboxCurrent" style="float: left; display: none;"></div> 
<div id="cboxNext" style="float: left; display: none;"></div> 
<div id="cboxPrevious" style="float: left; display: none;"></div> 
<div id="cboxSlideshow" style="float: left; display: none;"></div> 
<div id="cboxClose" style="float: left;">close</div> 
</div> 
<div id="cboxMiddleRight" style="float: left; height: 207px;"></div> 
</div> 
<div style="clear: left;"> 
</div> 
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div> 
</div> 
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="display: none; z-index: 1000; outline: 0px none;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-box-trash-dialog"> 

答えて

3

iframeを使用すると、onCompleteは実際にiframe要素がドキュメントに追加されるとすぐに起動します。内容を照会する場合は、DOMが準備完了するまで待つ必要があります。親ドキュメントがiframeのDOMがいつ準備できているかを知る方法はなく、ウィンドウのonloadイベントだけをリッスンすることができます。

しかし、iframeのonloadイベントが発生した後で、fastIframeプロパティをfalseに設定することで、colorboxに待機してonComplete関数を起動させることができます。例:もちろん

$('a.example').colorbox({iframe:true, fastIframe:false, width:500, height:500}) 

このすべては、IFRAMEが親と同じドメインから発信されていると仮定し、とiframeの内容にアクセスするからあなたを防ぐことはセキュリティ上の制限はありません。

+0

ありがとう! gocomling "oncomplete colorbox"の後、私はこのページを見つけました:http://groups.google。com/group/colorbox/browse_thread/thread/77e89cc514d43abf あなたが他の誰かに説明した場所。今それは素晴らしいです。 – simonheinrich

0

、あなたはそれhereについて読むことができます。

さらに、iFrameのコンテンツにjqueryでアクセスできます(詳細はhereを参照してください)。

どちらのソリューションもIDでIDを見つけるので、これらのソリューションを使用するにはIDが必要です。私はこれが役立つことを願っています

+1

はい、私はIFRAMEにアクセスする方法を知っています。