JSFiddle - React, Tailwind, and code Playground

by ArtCore7

HTML

<body>
  <iframe id="pagecontent" src="" frameborder="0" width="100%" height="3000px" scrolling="no"></iframe>
</body>

JavaScript

var element = document.getElementById('pagecontent');
var pageAtimeout, pageBtimeout;
var pageB = 'https://netcup.de/';
var pageBDuration = 12000; 
var pageA = 'https://wikipedia.de/';
var pageADuration = 24000;

window.onload = function(){
	element.src = pageB;
};

function showPageA(duration) {
  pageAtimeout = setTimeout(function()
  { 
      console.log('pageAtimeout', duration)
      var currentAttribute = element.getAttribute('src');
      element.setAttribute('src', pageA);
    StopPageAFunction();
    showPageB(pageBDuration);
    
  }, duration);
}

function showPageB(duration) {
  pageBtimeout = setTimeout(function()
  { 
      console.log('pageBtimeout', duration)
      var currentAttribute = element.getAttribute('src');
      element.setAttribute('src', pageB);
    StopPageBFunction();
    showPageA(pageADuration);
    
  }, duration);
}

function StopPageAFunction() {
    console.log('clearTimeoutA')
  clearTimeout(pageAtimeout);
}

function StopPageBFunction() {
    console.log('clearTimeoutB')
  clearTimeout(pageBtimeout);
}

function start() {
	showPageA(pageBDuration);
}

start();