Javascript setTimeoutがiFrameで正常に動作しない

私はいくつかのログを表示するウェブページを持っています。ログをクリックすると、iFrameが動的に生成され、iFrameはすべてのデータを読み込みます。私はiFrameページでajaxを使ってデータを最新の状態に保ちました。 setTimeoutを使用してAjaxを実行します。ここに問題があります。 iFrameのURLだけを入力すると、毎秒更新されます。しかし、iFrameを作成するためにjavascriptを使用するログをクリックすると、ajaxを1回実行して停止します。私が間違っていることを確かめることはできませんが、私は思うにはとてもシンプルでなければなりません。Javascript setTimeoutがiFrameで正常に動作しない

//FIRST THE IFRAME IS CREATED 
var ifrm = document.createElement('iframe'); 
ifrm.setAttribute('src', 'iframe.php?username='+user); 
ifrm.style.width="100%"; 
ifrm.style.height="100%"; 
ifrm.frameBorder="0"; 
ifrm.setAttribute('id', 'settings'); 
div.appendChild(ifrm); 


//THIS FUNCTION IS IN THE IFRAME 
//I REPLACED THE AJAX CODE WITH AN ALERT FOR TESTING 
(function timed() { 
    alert("hi"); 
    setTimeout(timed, 1000); 
}()); 


//NEW CODE IN PARENT, AT BOTTOM OF PAGE, AFTER IFRAME IS CREATED 
//THE FUNCTION IN THE IFRAME IS NAMED UPDATE() 
<script> 
setTimeout(document.getElementById('settings').contentWindow.update(), 1000); 
</script> 

//IFRAME CODE 
function update(){ 
    alert("hi"); 
}

出典

2016-12-11 rerat

親にsetTimeoutを使用してiframeをリロードすることはできますか？ – sbarnard

あなたは、親、ないiframeでsetTimeoutを呼び出す標的部位として、iframe内に関数を参照することができるはずです。ここで

setTimeout(document.getElementById('frameId').contentWindow.timed(), 1000);

は、私は私の地元にしようとした完全な例でありますホスト：

main.htmlと：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <iframe src = "frame.html" id="frame" name="frame"></iframe> 
</body> 
<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
     var frame = document.getElementById('frame'); 
     var updater = function(){  
      if(typeof(frame.contentWindow.self.update) == 'function'){ 
       frame.contentWindow.self.update(); 
      } 
      setTimeout(updater, 5000); 
     }; 

     updater(); 
    }); 
</script> 
</html>

frame.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script> 
     var test_counter = 0; 

     var update = function(){ 
      console.log('updating'); 
      document.getElementById('testcount').innerHTML = test_counter; 
      test_counter ++; 
     } 

     this.update = update; 
    </script> 

</head> 
<body> 
    <h1>I am an iframe<h1> 
    <div>I have been updated <span id="testcount">0 </span> times.</div> 
</body> 
</html>

これは、フレームと親コンテナの両方が同じ起源のものである場合にのみ有効です。また

のiframeが最初にあなただけの任意の間隔でそれをリロードすることができ、負荷の最新情報を表示する場合：

document.getElementById('frame').contentWindow.location.reload();

を（自分のオリジナルのポストに私の以前のコメントにしてBindridで述べたように）

出典

2016-12-11 19:23:55 sbarnard

あなたの提案を反映するために上記のコードを更新しましたが、親Webページを開いてログをクリックするとiFrameが開きますが、更新機能は起動しません。私は何か見落としてますか？ – rerat

私はiframeを作成する前に、更新機能を起動しようとしています。これを修正し、それが動作するかどうかを確認します。 – rerat

Ok、変更を反映するために上記のコードを再度更新しましたが、それでも動作しません。何か案は？ – rerat

これは別の解決方法です。 iframeに読み込まれているページが、複雑なページではなく単純なログである場合は、最初にログが読み込まれた後にこれを実行します。あなたのコードからは、私は、あなたがリロードを停止したいときにクリアする間隔オブジェクトを使用することができます

  interval = setInterval(function() { 
      document.getElementById('settings').contentWindow.location.reload(true); 
     }, 2000);

のiframe idは「設定」で表示さそう...。

出典

2016-12-11 20:06:31 Bindrid

Javascript setTimeoutがiFrameで正常に動作しない

答えて

関連する問題