2

jquery colorbox プラグインによって生成された iframe のコンテンツに何時間もアクセスしようとしましたが、成功しませんでした。

私のコードは次のとおりです。

    $(".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 はありません。クラス名も挿入してみました。

htmlに直接挿入され、カラーボックスによって生成されない「通常の」iframeの場合、私の機能は機能しています。

ありがとうございました

生成されたコード:

<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">
4

2 に答える 2

3

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

ただし、fastIframe プロパティを false に設定することで、iframe の onload イベントがトリガーされた後に onComplete 関数を待機して起動するよう colorbox に指示できます。例：

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

もちろん、これはすべて、iframe が親と同じドメインから発信されていることを前提としており、iframe のコンテンツへのアクセスを妨げるセキュリティ上の制限はありません。

于 2012-04-14T02:24:55.440 に答える
0

iframe のコンテンツにアクセスするための corss-browser ソリューションがあります。詳細については、こちらを参照してください。

また、jquery を使用して iFrame のコンテンツにアクセスすることもできます。詳しくは、こちらをご覧ください。

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

于 2012-04-12T15:57:45.477 に答える