How to Stop the Iframe from Constantly Reloading After Setinterval (Jquery)

How can I stop the Iframe from constantly reloading after setInterval (JQuery)

You need to change the logic to store the previously retrieved value. Then you will know if the value changes on the next request in order to update the src of the iframe. Try this:

function ScreenSwitch() {
  $.getJSON(screenNumberUrl, (data) => {
    if (previousScreenState != data.ScreenState) {
      $("#os-iframe").attr("src", data.ScreenState == 0 ? 'about:blank' : 'OverallStandings.html');
    }
    previousScreenState = data.ScreenState;
  });
}

var previousScreenState;
ScreenSwitch();
setInterval(ScreenSwitch, 5000);

The above logic is assuming that it's possible for data.ScreenState to dynamically change between 0 and 1 multiple times during runtime. If it's only possible for it to change once then this can be made simpler still.

My livefeed reloads every 30 seconds. How stop refresh when playing video?

The following is untested. One thing beforehand - you can't handle an html5 video element the same way like an embedded youtube iframe.
In case you have a video element you can interact directly with it and use the eventhandlers for play, pause and end to handle your request. A possible solution could look something like this:

$(function() {
    var refreshId;
    // collection of all video elements on your page
    var videos = $('video');

    // disable reload by clearing the interval
    function blockReload() {
        clearInterval(refreshId);
    }

    // your existing reload function
    function startReload() {
        refreshId = setInterval(function() {
            $("#updates").load('updates.php' + '?randval=' + Math.random());
        }, 30000);
    }

    // loop over all video elements on your page and bind
    // three event handlers, one for playing, one for pausing
    // and one for an ended video.
    videos.each(function() {
        this.addEventListener('playing', blockReload);
        this.addEventListener('paused', startReload);
        this.addEventListener('ended', startReload);
    });
});

Since you can't control embedded elements directly, you'll need to work with the youtube API.
Instead of using the iframe from youtube, you use the API to load the video like this (example from the API page):

// This code loads the IFrame Player API code asynchronously.
// you could also use a normal script tag in that case you would load 
// the lib each time.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Next you load the video via the script library:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360'
    width: '640',
    videoId: 'YOURVIDEOID',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

Now you can interact with the youtube video:

function onPlayerStateChange(event) {
  // check if video is running...
  if (event.data == YT.PlayerState.PLAYING) {
    // disable interval
    blockReload();
  } else {
    // restart interval
    startReload();
  }
}

ReCall iframe after setInterval

 <script type="text/javascript">
  $(document).ready(function(){

    $("#iframe").colorbox({iframe:true, width:"500px", height:"600px"});

    var refreshId = setInterval(function() {
     $('#chatting').load("<?php echo current_url() ?> #chatting", function() {
         $("#iframe").colorbox({iframe:true, width:"500px", height:"600px"});
     }) ;
    }, 2000);


  });
</script>

Reload an iframe with jQuery

If the iframe was not on a different domain, you could do something like this:

document.getElementById(FrameID).contentDocument.location.reload(true);

But since the iframe is on a different domain, you will be denied access to the iframe's contentDocument property by the same-origin policy.

But you can hackishly force the cross-domain iframe to reload if your code is running on the iframe's parent page, by setting it's src attribute to itself. Like this:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

If you are trying to reload the iframe from another iframe, you are out of luck, that is not possible.

---

Related Topics