web-dev-qa-db-ja.com

iframeがロードされているか、コンテンツが含まれているかどうかを確認するにはどうすればよいですか？

Id = "myIframe"のiframeがあり、ここにコンテンツを読み込むためのコードがあります。

$('#myIframe').attr("src", "my_url");

問題は、ロードに時間がかかりすぎたり、ロードが非常に速くなることです。したがって、「setTimeout」関数を使用する必要があります。

setTimeout(function(){
   if (//something shows iframe is loaded or has content)
   {
       //my code
   }
   else
   {
       $('#myIframe').attr("src",""); //stop loading content
   }
},5000);

私が知りたいのは、iFrameがロードされているか、それがコンテンツを持っているかを調べる方法だけです。 iframe.contents().find()を使用しても機能しません。 iframe.load(function(){})を使用できません。

javascriptjqueryiframe
68
newbie29

これを試して。

<script>
function checkIframeLoaded() {
    // Get a handle to the iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (  iframeDoc.readyState  == 'complete' ) {
        //iframe.contentWindow.alert("Hello");
        iframe.contentWindow.onload = function(){
            alert("I am loaded");
        };
        // The loading is complete, call the function we want executed once the iframe is loaded
        afterLoading();
        return;
    } 

    // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("I am here");
}
</script>

<body onload="checkIframeLoaded();">
70
Biranchi

親切に使用：

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

基準が変更されたときに私の回答を更新しました。

40
pratikabu

最も簡単なオプション：

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>
14
Orane

私は同じ問題を抱えており、これに追加し、クロスドメインポリシーに関係なくiframeがロードされているかどうかを確認する必要がありました。 Webページに特定のスクリプトを挿入し、iframeの親ページのコンテンツを表示するchrome拡張機能を開発していました。私は次のアプローチを試みましたが、これは私にとって完璧に機能しました。
追伸：私の場合、iframeのコンテンツは制御できますが、親サイトは制御できません。（iframeは自分のサーバーでホストされています）

最初：
data-属性を含むiframeを作成します（この部分は、私の場合、挿入されたスクリプトに含まれていました
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

ここでiframeコードで、次を使用します。

var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);



今、私の場合のように、挿入されたスクリプトに戻ります。

setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
},3000);


そして、

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    if(event.Origin !== 'https://someWebsite.com') //check Origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $("#myiframe").prop('data-isloaded', '1');
        }
    }           
}



質問に正確に答えていないかもしれませんが、実際にこの方法で解決したのはこの質問の可能性のあるケースです。

10
Tushar Shukla

Iframeのloadイベントを使用して、iframeの読み込み時に応答できます。

document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

正しいコンテンツがロードされたかどうかはわかりません：それを確認するには、contentDocumentを調べます。

document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', body);
};

Iframe contentDocumentがコードの実行場所とは異なるドメインを指している場合、srcのチェックは機能しません。

5
Max Heiber

私の場合、それはクロスオリジンフレームであり、時々ロードしませんでした。私のために働いた解決策は次のとおりです：それが正常にロードされたら、このコードを試してみると：

var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);

contentDocumentにアクセスしてクロスオリジンエラーをスローすることはできませんが、フレームが正常にロードされない場合、contentDocumentは#documentオブジェクトを返します

4
Raza Ahmed

IFrameがロードされると、最初は#documentが含まれているため、現在の内容を確認することでロード状態を確認するのが最適です。

if ($('iframe').contents().find('body').children().length > 0) {
    // is loaded
} else {
    // is not loaded
}
2
obimod

本当に素晴らしい方法は、jQuery AJAXを使用することです。親フレームは次のようになります。

<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

Iframe_load.phpファイルは、jQueryライブラリと、AJAX GETで宛先URLをロードしようとするJavaScriptをロードします。

var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
            type: "GET",
            url: the_url_to_load,
            data: "",
            success: function(data){
                // if can load inside iframe, load the URL
                location.href = the_url_to_load ;
            },
            statusCode: {
                500: function() {
                    alert( 'site has errors' ) ;
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                // if x-frame-options, site is down or web server is down
                alert( 'URL did not load due to x-frame-options' ) ;
            } });

IMPORTANT宛先には、「Access-Control-Allow-Origin」ヘッダーが含まれている必要があります。 PHPの例：

HEADER( "Access-Control-Allow-Origin: *" ) ;
0
Nate Skate

Iframeを操作する準備ができたことを知る必要がある場合は、間隔を使用します。この場合、250ミリ秒ごとにコンテンツを「ping」し、ターゲットiframe内にanyコンテンツがある場合、「ping」を停止して何かを行います。

var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 );

function checkIframeLoaded() {
    var iframe_content = $('iframe').contents();

    if (iframe_content.length > 0) {
        clearInterval(checkIframeLoadedInterval);

        //Apply styles to the button
        setTimeout(function () {
            //Do something inside the iframe 
            iframe_content.find("body .whatever").css("background-color", "red");
        }, 100); //100 ms of grace time
    }
}
0
Jimmy Adaro