javascript - Multiple HTML pages with different display time in same iFrame -
i have 5 html
pages , iframe.
i need display html
pages in iframe specific display time each page. delay should include time loading iframe container. first page has display time of 10 seconds, second page display time of 20 seconds, third page display time of 30 seconds , on.
how display these pages bound display time?
i have tried many ways add load time including iframe.load in code causes weird recursions alters display time.
i suggest loading first source after iframe.load page initialization finished. code uses jquery.
the logs of course making sure timing want be, minimal offsets (one-digit milliseconds when tested it.)
<iframe id="myiframe"></iframe> <script> var currentframeid = 0; var framelengths = [0,10000,20000,30000,40000];//the first page should displayed ready var frameurls = ["http://example.com/page1", "http://example.com/page2", "http://example.com/page3", "http://example.com/page4", "http://example.com/page5"]; function nextframe(){ if(currentframeid == frameurls.length) return; console.log((new date().gettime()) + ": setting iframe src " + frameurls[currentframeid] + "(frame id " + currentframeid + ")"); $('#myiframe').attr('src',frameurls[currentframeid]); currentframeid++; } $(function(){ console.log((new date().gettime()) + ": starting javascript"); $('#myiframe').load(function(){ console.log((new date().gettime()) + ": iframe loaded frame id " + currentframeid); window.settimeout(nextframe, framelengths[currentframeid]); }); nextframe(); }); </script>
see working example under https://jsfiddle.net/kx2vdj16/
Comments
Post a Comment