Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

IvanGS

New Tab JavaScript

Mensagens Recomendadas

IvanGS    0
IvanGS

Boas pessoal :)

estou aqui com um pequeno problema...

ando a tentar fazer uma coisa, que passado x tempo abre uma nova tab no browser...

o timer está feito, mas o código para abrir uma nova tab nã dá... só me abre um popUp, alguém me pode ajudar?

a função é esta:

function timeMsg()
{
var t=setTimeout("displayWindow()",5000);
}
function displayWindow()
{
window.open('http://www.google.com', '_newtab'); 
}

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

O firefox tem API para especificamente abrir uma nova tab mas só o js do firefox com direitos de Chrome tem acesso a ela.

O js da maioria das páginas tem q se contentar com o método open(). Dar o nome "_newtab" não altera a sua funcionalidade.

Já agora, num site que eu entre com o meu browser, se abrires uma janela de 5 em 5 segundos, o browser irá acabar por bloquear. Por que razão queres fazer alguma coisa desse tipo? Superlotar o browser?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
IvanGS    0
IvanGS

não, eu meti 5 segundos que e parateste, ela tem o load dessa função no onload do body... o objectivo e criar um sistema de login quando a cookie do php acabar...

mas isto vai ser só ser visto no chrome, pq é um sistema de gestão da empresa onde trabalho... e todos usam o chrome...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

não, eu meti 5 segundos que e parateste, ela tem o load dessa função no onload do body... o objectivo e criar um sistema de login quando a cookie do php acabar...

Hum... Acho que usar um popup é má ideia.... Experimenta usar AJAX e uma "caixa" (div) com um código simples para executar o login. Acho que assim conseguirias algo util.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

Mas eu não quero popUp lol, quero uma nova tab...

No firefox, fiz download agora testei e abriu uma nova tab, no chrome não :S

Depende exclusivamente das opções do browser.

O firefox vem, por defeito, qd se executa o open() abre uma nova tab. No Chrome, abre uma nova janela.

Isto é algo que tu não tens controlo para prever o que vai acontecer é algo que depende das opções do utilizador do browser.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
IvanGS    0
IvanGS

estou a tentar aquilo que me disses-te, fazer um form de login em Ajax, eu ja tenho o código, e localmente funciona... mas ao implementar deixa de funcionar, ela faz o post, mas em vez de ficar na página, muda para a página de login...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
IvanGS    0
IvanGS

eu tenho o form numa div criada em javaScript...

e depois tenho este código para fazer o login em Ajax.

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#login_a").click(function(){
			$("#shadow").fadeIn("normal");
			 $("#login_form").fadeIn("normal");
			 $("#user_name").focus();
		});
		$("#cancel_hide").click(function(){
			$("#login_form").fadeOut("normal");
			$("#shadow").fadeOut();
	   });
	   $("#login").click(function(){

			username=$("#user_name").val();
			password=$("#password").val();
			 $.ajax({
				type: "POST",
				url: "submitPOPUP.php",
				data: "name="+username+"&pwd="+password,
				success: function(html){
				  if(html=='true')
				  {
					$("#login_form").fadeOut("normal");
					$("#shadow").fadeOut();
					$("#profile").html("<a href='logout.php' id='logout'>Logout</a>");

				  }
				  else
				  {
						$("#add_err").html("Wrong username or password");
				  }
				},
				beforeSend:function()
				{
					 $("#add_err").html("Loading...")
				}
			});
			 return false;
		});
	});
	</script>

e isto é o php

session_start();
$username = $_POST['name'];
$password = md5($_POST['pwd']);
require_once('connection.php'); 

$sql = mysql_query("SELECT User, Paswword FROM ezsoft_colaboradores WHERE User='".$username."' and Paswword ='".$password."'");
$number_results = mysql_num_rows($sql);
if ($number_results == 1)
{

setcookie("login", $username, time()+3600);
echo "true";
}
else
{
echo "false";
}

tenho que fazer ainda uma segurança nas variáveis

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

O que se passa é algo que eu não consigo identificar lendo esse código.

Pela descrição, a mim parece-me a falta de um preventDefault() mas como não estás a usar o API da especificação do DOM e sim uma biblioteca já não sei se é preciso algo desse tipo. Também não sei o HTML do formulário.

Usa o "var" para definir variáveis. Se não o usares estás a usar propriedades do window o que é, geralmente, má ideia.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

consegues.e arranjar então alguma script?

eu sei que não se deve pedir código, mas já estou a fritar o miolo :S

Posso dar-te tudo o q precisas para fazer a coisa como deve ser.

Dicas, ideias, maneiras de pensar, páginas de instruções, excertos de código e ir acompanhando neste caso a ajudar-te. Mas não dou-te código feito.

Aceitas?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

claro que aceito, toda ajuda é muito bem vinda

good ^^

O objetivo do que eu te vou ensinar vai ser para trabalhar com o API segundo a especificação e usar o jQuery para a animação mais "rebuscada" (fade in e fade out).

Eu só vou indicar uma maneira de resolver o problema. Há outras maneiras de o resolver mas acho que este é bom para esta situação.

Para começar precisas do seguinte HTML (só indico as ideias):

Um div (chamo formContainer) e lá dentro:

Um form (com um id)

Algo para formatar os inputs (um ul, labels, etc...) com os inputs lá dentro.

Um <button> (não precisa de Id) sem um value (não precisa).

Um div (chamo loginErrors) e lá dentro:

Um div para se existir um erro no username/password

Um div para se existir um erro na ligação

...

Cada um destes contém o texto que deve aparecer quando a situação a que corresponde ocorre.

Um div (chamo loggedIn) e lá dentro:

Todo o HTML que é suposto aparecer quando o login está feito.

Deve também existir um div ou span para aparecer o "loading" quando apropriado.

No PHP aconselho usares o $_SESSION em vez de um sistema de cookies para variáveis de sessão. O PHP sabe manter a segurança dos dados que metes nesse array (exceto se ele gradar os dados em cookies que envia para o utilizador, o que não acontece por defeito).

Quando acabares avisa para passarmos à fase seguinte. O js para o DOM.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
IvanGS    0
IvanGS

ok, ate aí tudo bem... já tenho isto

    <div id="login_form">
        <div class="err" id="add_err"></div>
    	<form action="login.php">
		<label>User Name:</label>
		<input type="text" id="user_name" name="user_name" />
		<label>Password:</label>
		<input type="password" id="password" name="password" />
		<label></label><br/>
		<input type="submit" id="login" value="Login" />
		<input type="button" id="cancel_hide" value="Cancel" />
	</form>
    </div>
<div id="shadow" class="popup"></div>

mas depois vou precisar de biblioteca do jQuery certo?

--

Edit(brunoais): o geshi estava errado

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

ok, ate aí tudo bem... já tenho isto

    <div id="login_form">
        <div class="err" id="add_err"></div>
    	<form action="login.php">
		<label>User Name:</label>
		<input type="text" id="user_name" name="user_name" />
		<label>Password:</label>
		<input type="password" id="password" name="password" />
		<label></label><br/>
		<input type="submit" id="login" value="Login" />
		<input type="button" id="cancel_hide" value="Cancel" />
	</form>
    </div>
<div id="shadow" class="popup"></div>

Vejamos... há aqui alguns pormenores a limar.

[*]É suposto todo o texto das mensagens de erro já estar escrito. O que vai torna-lo invisível é o CSS que vais aplicar ("display:none")

[*]Usa a label a "cobrir" tanto o texto de label como o input. Como está agora só "cobre" o texto do input e o browser não sabe a que é que esse texto corresponde (existe o atributo for mas não é a melhor opção para este caso específico)

[*]O que é o shadow? É para aparecer qd o login está feito?

[*]Para o login e para o cancel_hide usa a tag <button>. É mais apropriada para essa situação em particular. Remove o label que tens antes disso (a q antecede o <br>)

mas depois vou precisar de biblioteca do jQuery certo?

Para a minha infelicidade (n vamos fazer tudo com a API do browser) é melhor sim. O fade in e o fade out não são pêra doce para se fazer e concordo em usar o jQuery para algo desse tipo.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
IvanGS    0
IvanGS

alterei o html, esse que meti em cima era um que já tinha.

<html>
<head>
</head>

<body>
	<div id="formContainer">
		<form id="formPost">
			<ul>
				<li> Username: <input type="text" id="name"> </li>
				<li> password: <input type="text" id="pass"> </li>
				<li> <input type="submit" id="login" value="Login" /> </li>
			</ul>
		</form>
	</div>
	<div id="loginErrors">
		<div id="userPassErros" style="display:none">
			<h1> Erro no utulizador ou na password </h1>
		</div>
		<div id="connectionError" style="display:none">
			<h1> Erro na conexão</h1>
		</div>
	</div>
	<div id="loggedIn">
	<!-- resto da pagina -->
	</div>
</body>
</html>

--

Edit(brunoais):geshi corrigido

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais

Se precisares de remover os bullets do form podes usar isto:

list-style-type: none;

Cuidado com o id: userPassErros acho q devia de ser userPassError (para evitar erros futuros).

'kay, js.

Vais precisar do nosso amigo:

https://developer.mozilla.org/en/DOM/element.addEventListener

Para usar para o 'load' e para o 'submit'. Por exemplo, para verificar que o formulário está a tentar ser submetido:

element.addEventListener('submit', functionToHandleSubmit, false);

Aqui element seria uma variável que é um apontador para um objeto do "tipo" Node (como um que o getElementById() devolve)

Iremos tratar da tal functionToHandleSubmit depois.

Por agora:

Ainda precisas de

https://developer.mozilla.org/en/DOM/document.getElementById

Para obter apontadores para todos os elementos que necessitas que são:

name, pass, formPost, formContainer, userPassErrors, connectionError e loggedIn.

Gravas os apontadores em variáveis (usando o var).

Todo este código tem que ser executado pela função que "envias" para o addEventListener para o load.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita a nossa Política de Privacidade