How to change the . html page automatically from a predetermined time?

Asked

Viewed 1,067 times

0

I have a system for content display and I need that from a predetermined time my page .html change to another content (another page) automatically.

NOTE:

The device to display the site will not contain input devices such as mouse, it is necessary that from page loading the function be executed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<link rel="icon" type="image/x-icon" href="img/favicon.png"/>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>.:: Painel Cirurgias ::.</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
	<link rel="stylesheet" type="text/css" href="css/inside.css"/>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.10.3.custom.css"/>
	<link rel="stylesheet" type="text/css" href="css/select2.css "/>
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/bootbox.js"></script>
	<script type="text/javascript" src="js/select2.js"></script>
	<script type="text/javascript" src="js/meio.mask.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
	<script type="text/javascript" src="js/functions.js"></script>
	<!-- <link href="css/carousel.css" rel="stylesheet"> -->

</head>

<body class="gradient">
	<div class="container">
		<div class="row">
			<center>
				<br>
				<a href="index.php"><img src="img/logo.png"></a>
			</center>
		</div>
		<div class="row">

<?php

include_once('db_functions.php');

ini_set('default_charset','UTF-8');

$id = isset($_GET['id'])?$id=$_GET['id']: NULL;
$id = isset($_POST['id'])?$id=$_POST['id']: NULL;

$con = dbConnect();

?>

<div class="content well pull-left span12">

	<div class="row">
		<div class="span12">
			<?php

			    include('paginator.php');

			    $page = isset($_GET['page'])?$_GET['page']:1;

				$busca = isset($_GET['busca'])?$_GET['busca']:null;

				$painels = findPainels($con,$busca);

				$painelsPag = getPageElements($painels,$page,11);

			?>

			<?php if($painels):?>
				<table class="table table-striped">
					<thead>
						<th>Id</th>
						<th>Status</th>
						<th>Data</th>						
						<th>Hora</th>
						<th>Paciente</th>
						<th>Tipo</th>
						<th>Hospital</th>
						<th>Médico</th>
						<th>Convênio</th>
						<th>Cliente</th>
						<th>Intermediário</th>							
						<th></th>
					</thead>
					<tbody>

						<?php foreach ($painelsPag as $painel):

						    if ($painel["Cliente"] === 'ORTHOSEVEN'){								
								$painel["Cliente"] = '<span style="background:orange">'.$painel["Cliente"].'</span>';
							}

							elseif ($painel["Cliente"] === 'BM9 IMPLANTES'){
								$painel["Cliente"] = '<span style="background:#1E90FF">'.$painel["Cliente"].'</span>';
							}

								if ($painel["Intermediario"] === 'ORTHOSEVEN'){								
									$painel["Intermediario"] = '<span style="background:orange">'.$painel["Intermediario"].'</span>';
								}

								elseif ($painel["Intermediario"] === 'BM9 IMPLANTES'){
									$painel["Intermediario"] = '<span style="background:#1E90FF">'.$painel["Intermediario"].'</span>';
								}

									else {

										$cor = "#1E90FF";
									}

						?>
							<tr bgcolor="<?=$cor="#66CDAA"?>" class="<?=$painel['id']?null:'muted'?>" data-id="<?=$painel['id']?>">
							<tr bgcolor="<?=$cor?>" data-id="<?=$painel['id']?>">
								<td data-title="id"><strong><?=$painel['id']?></td></strong>
								<td data-title="Status"><strong><?=$painel['Status'];?></td></strong>
								<td data-title="Data"><strong><?=date('d/m/Y',strtotime($painel['Data']))?></td></strong>
								<td data-title="Hora"><strong><?=$painel['Hora']?></td></strong>
								<td data-title="Paciente"><strong><?=$painel['Paciente']?></td></strong>
								<td data-title="Tipo"><strong><?=$painel['Subtipo_Cirurgia']?></td></strong>
								<td data-title="Hospital"><strong><?=$painel['Hospital']?></td></strong>
								<td data-title="Medico"><strong><?=$painel['Medico']?></td></strong>
								<td data-title="Convenio"><strong><?=$painel['Convenio']?></td></strong>
								<td data-title="Cliente"><strong><?=$painel['Cliente']?></td></strong>
								<td data-title="Intermediario"><strong><?=$painel['Intermediario']?></td></strong>
							</tr>			
						<?php endforeach;?>
					</tbody>
				</table>
				<?php printPaginator($painels,$page,11);?>
			<?php else:?>
			<?php endif;?>
		</div>
	</div>
</div>

<?php include("base.php"); ?>

<script type="text/javascript">

$(document).ready(function () {
    setTimeout(function () {
        window.location.reload(1);
    }, 50000);
});
	
</script>

<script src="js/jquery.min.js"></script>		
<script src="js/bootstrap.min.js"></script>

<?php include("base.php"); ?>

php javascript jquery

  • Instead of using window.location.reload(1); you make a Ubmit form. Ex. var form = $('<form method="get" action="apropriapagina.php"> <input type="hidden" name="page" value="2"> </form>) $('body').append( form) form.submit()

  • @Bah this page change would have to occur from what event? For example: Click on the form’s Ubmit, while hovering somewhere, when the page is already loaded?

  • Take a look at this file here http://twixar.me/wJ1n, It is possible to update the page without javascript

  • @Bah answered your question, this is what I really wanted?

  • Dude you want from time to time the page to be forwarded to another page, like refreshing with other content is this?

  • @Bah my answer is correct for you? What was missing?

Show 1 more comment

2 answers

1

An alternative without the use of Javascript is with the meta tag Refresh, with it you can tell how long you want the document to wait before it is forwarded to another page, you can read more here https://www.w3.org/TR/html5/document-metadata.html#statedef-http-equiv-refresh

It would work like this, imagine you have three pages (p1.html, p2.html e p3.html), and every 10 seconds (10s) you want one page to be redirected to another. Like, it gets 10s on P1.html, then it goes to P2.html and it gets 10s, then it goes to P3.html etc...

To do this within the tag <head> of each document you need to put a <meta http-equiv="refresh" content="10; p*.html">, note that in the content="10; 10 refers to the seconds that will be on the page before forwarding to the other.

Soon you would have this structure in P1.html

<head>
    <meta http-equiv="refresh" content="10; p2.html">
</head>

This will do that after the p1.html load, 10 seconds later will forward you to p2.html

And that same model would be repeated in the <head> of p2.html e p3.html just changing the direction to the page you want, and putting the time you want on each page

0

Following your reasoning where when entering a certain page .html, from a predetermined time the "user" will be forwarded to another page .html and vise-versa.

For this you need to use some events and methods of javascript, which are:

Domcontentloaded

The event DOMContentLoaded is triggered when all HTML has been fully loaded and parsed, without waiting for CSS, images, and subframes to finish uploading. A very different event - load - should only be used to detect a fully loaded page. It is a common mistake for people to use load when DOMContentLoaded would be much more appropriate.

Observing: Javascript Synchronous pauses DOM analysis.

setTimeOut()

The setTimeout() is a method of WindowOrWorkerGlobalScope (and Creator of the Window.setTimeout()), where it sets a timer that executes a specific function or part of the code when the timer expires.

Observing: Passing additional parameters to the function in the first syntax does not work in Internet Explorer 9 and below. If you want to enable this feature in this browser, you must use a polyfill (see the section Polyfill ).

Window.Location

The Window.location is a read property that returns a Location object with location information of the current document. Although Window.location be just a location read object, you can also assign a DOMString for him. This means that you can work with location as if it were a string in most cases: location = 'http://www.exemplo.com' is a synonym for location.href = 'http://www.exemplo.com'.

Below is an example of how it works, where the scenario is as follows::

You own two (2) pages (pagOne.html and pagTwo.html), one event of verification if the .html has been fully charged (document.addEventListener("DOMContentLoaded"..)) and a function to change the page from a predetermined time, using the above methods (alterarPagina() + setTimeOut() + window.location.replace());

Pagone.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Página UM</title>
</head>
<body>
    <h1 style="color: red;">VOCÊ ESTÁ NA PÁGINA UM</h1>

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            alert("DOM completamente carregado e analisado");
            alterarPagina(1000);
        });

        function alterarPagina(timer) {
            setTimeout(() => {
                alert("O TEMPO ACABOU!");
                window.location.replace('pagTwo.html');
            }, timer);
        }
    </script>
</body>
</html>

Pagetwo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Página DOIS</title>
</head>
<body>
    <h1 style="color: red;">VOCÊ ESTÁ NA PÁGINA DOIS</h1>

    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            alert("DOM completamente carregado e analisado");
            alterarPagina(1000);
        });

        function alterarPagina(timer) {
            setTimeout(() => {
                alert("O TEMPO ACABOU!");
                window.location.replace('pagOne.html');
            }, timer);
        }
    </script>
</body>
</html>

NOTE:

Take care of the events, I suggest you read the documentation of them to check in more detail their operation.

  • But the biggest problem is that the pages are not fixed, in my select is to display the records in the last 60 days, it may generate 10 pages or 7 pages. Then it will vary and besides changing page I will have to put a reflesh on the screen every 1 min. That would be my great difficulty.

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.