Question

示例我有两个链接google.com和youtube.com。我想在一个屏幕板网页上显示界面网络每30秒（它在屏幕板上显示，首先显示网页google.com，然后在30秒后，它将显示网页youtube.com，并重复）。我可以使用javascript或jquery吗？

<html>
<body>
  <!-- Show page google.com-->
  <!-- Show page youtube.com-->
</body>
</html>

Answer 1

我不确定为Google和YouTube展示iFrame是个好主意，除非您嵌入特定视频，否则YouTube会对同源问题发出激烈争论，Google也是如此。

然而，除了您链接的网站，要实际达到您的要求（如果我已正确理解了问题），我会这样做：

＆＃13;

var counter = $('#counter');
var count = $(counter).html();
var origCount = count



function tick(){
	count--
  $(counter).html(count)
  if (count == 0 ) {
  	toggleIframe()
    count = origCount
  }
}


function toggleIframe(){
	$('iframe').toggle();
}

setInterval(tick, 1000);

＆＃13;

iframe{
  border:5px solid #333;
}
#counter{
  font-size:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">10</div>

<div id="iframeContainer">
<iframe width="560" height="315" src="https://laravel.com/"></iframe>

<iframe width="560" height="315" src="https://vuejs.org/" frameborder="0" style="display:none;"></iframe>
</div>

＆＃13;

Answer 2

根据你的评论我添加了另一个答案，这里有更多的评论，所以希望很容易理解。

此版本是动态的，因此您只需向列表中添加更多iframe，它们就会被添加到循环中。

＆＃13;

// This is just to display a counter for demo purposes, you can remove this
var counter = $('#counter');

// Set the count of seconds for each iframe to display
var seconds = 5

// this is the current tick, so will count down to 0 then reset to the seconds variable value.
var tick = seconds;

// count the number of iframes on the page.
var iframesCount = $('#iframeContainer').find('.iframe').length;

// hold the current frame to show.
var currentIframe = 0;

// main function that will be run every second (1000 ms)
function run(){
	// decrement the tick by 1
	tick--
  // update the tick counter on screen (just for demo purposes, you can remove this)
  $('#counter').html(tick)
  // if tick is at 0 we need to switch the frame to the next one.
  if (tick === 0 ) {
  	// switch frame to the next frame in the list.
    nextIframe(); 
    // reset the tick back to its original value
    tick = seconds;
  }
}

function nextIframe(){
	// check if the current frame is the last one in the list
	if (currentIframe === iframesCount - 1){
  
  // If it is the last in the list, set the current frame to 0 so we begin back at the first frame
  	currentIframe = 0;
  }
  else {
  // if the current frame is not the last in the list, then increment the current frame by 1
  	currentIframe++
  }
  // run the toggleFrame function to show/hide the respective frames
  toggleIframe();
  
}

function toggleIframe(){
	// hide all the frames
  $('.iframe').hide();
  // show only the frame that matches current frame
  var frame = $('.iframe')[currentIframe]
  $(frame).show();
}

// kick off the main "run" function every 1000 ms (1 second)
setInterval(run, 1000);

＆＃13;

iframe{
  border:5px solid #555;
  display:none;
}
iframe:nth-child(1){
  display:block;
}

#counter{
  font-size:30px;
}

＆＃13;

<div id="iframeContainer">
  <iframe class="iframe" width="560" height="315" src="https://laravel.com/"></iframe>
  <iframe class="iframe"  width="560" height="315" src="https://vuejs.org/"></iframe>
  <iframe class="iframe"  width="560" height="315" src="https://vuejs.org/v2/guide/"></iframe>
  <iframe class="iframe"  width="560" height="315" src="https://vuejs.org/v2/api/"></iframe>
  
  <!-- Try to uncomment the below iframe and it should automatically get included in the cycle -->
  <!--<iframe class="iframe"  width="560" height="315" src="https://vuejs.org/v2/style-guide/"></iframe>-->
</div>

<!-- You can delete the below, its just for demo -->
<div id="counter"></div>



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

＆＃13;

如何在页面中显示更多网页？

2 个答案: