IFRAME 読み込み完了時にコールバックを実行する

IFRAME を使用する場合、読み込みプロセスの完了後にコールバックを実行することが重要な要件となる場合があります。 。ただし、このタスクは、特に IFRAME のコンテンツを制御できない場合に困難になる可能性があります。

この問題に対処するには、IFRAME の作成を変更し、タイムアウト メカニズムを組み込む手法を採用できます。プログラムで IFRAME を作成すると、IFRAME にイベント リスナーを追加できるようになります。次のコードは、これを実現する方法を示しています。

$(iFrameObj).load(function() {
  document.body.removeChild(iFrameObj);
  setTimeout(function() {
    callback(iFrameObj.innerHTML);
  }, 50);
});

このコード スニペットで示されているように、「load」イベント リスナーは、作成後に IFRAME にアタッチされます。ロードが完了すると、IFRAME は DOM から削除され、IFRAME が存在しなくなった後にコールバックが確実に実行されるように、短いタイムアウトが導入されます。このタイムアウト バッファは、ブラウザの動作における潜在的な不一致を考慮しています。

この方法では、IFRAME の URL がドメイン内にあることを前提としていることに注意してください。クロスサイトリクエストの場合、ブラウザのセキュリティ対策により IFRAME のコンテンツへのアクセスが制限されるため、別のアプローチが必要になる場合があります。