jQuery.appendToは、$がロードされた場所に基づいて、いくつかのドキュメントコンテキストでのみ動作します

Question

紛らわしいタイトルのためにお詫び申し上げます。

フレンドリーなiframeを含むウェブページがあり、その内部にスクリプトタグがiframeに含まれています。 documentに

<iframe src="Javascript:'<div id=\'target\'></div><script src=\'appendStuff.js\'><\/script>'"></iframe> 

appendStuff.js負荷のjQueryをし、次のような操作を行います：基本的に、それはこのようになります。これは、正常に動作します

doc = document; // the iframe's document 
$('<h1>Loaded!</h1>').appendTo('#target', doc); 

。しかし、appendStuff.jsの別のバグを修正するには、iFrame内にあるdocumentではなく、window.top.documentにjQueryを移動してロードする必要がありました。

ここで、.appendTo('#target', doc)コールは自動的に失敗し、何も追加されません。

$('#target', doc)を選択するだけで正常に動作するように見えるため、これは非常に混乱します。

これが実際に壊れているかどうか、私が何か間違っている場合、またはこの問題を回避する方法があるかどうかは誰にも分かりますか？

Answer 1

jQueryはドキュメントの準備ができています。 「appendStuff.jsの別のバグを修正する」と言いますと、私の最初の推測は、バグにはドキュメントの準備が整う前に実行しようとしていたコードと関係があり、jQuery自体がロードされる前です。コンソールで、$（ '＃target'、doc）を手動で選択しようとしているときには、ページがロードされた後、つまりドキュメントの準備が整った後でそれをやっていると推測します。

まず、あなたのappendStuff.jsを見てください。推測すると、$（function（）{...}）でラップする必要があります。ロードオーダーの問題を修正しました。また、How can I detect whether an iframe is loaded?とHow to check if iframe is loaded or it has a content?を見てください。本当に親にこのロジックがあるように聞こえるので、iframeにshoehorningするのではないでしょうか。