【1. Janela pop-up comum】
Na verdade, o código é muito simples:
<SCRIPT LANGUAGE=javascript>
<!--
janela.open ('página.html')
-->
</SCRIPT>
Como este é um trecho de código javascripts, eles devem ser colocados entre a tag <SCRIPT LANGUAGE=javascript> e </script>. <!-- e --> são eficazes para alguns navegadores mais antigos. Nesses navegadores antigos, o código na tag não será exibido como texto. Desenvolva esse bom hábito.
window.open ('page.html') é usado para controlar o pop-up de uma nova janela page.html Se page.html não estiver no mesmo caminho da janela principal, o caminho deve ser indicado na frente, o caminho. caminho absoluto ([url]http:// )[/url] e caminhos relativos (../) são aceitáveis.
Você pode usar aspas simples ou duplas, mas não as misture.
Este trecho de código pode ser adicionado em qualquer lugar do HTML, entre <head> e </head>, ou entre <body> e </body>. Quanto mais cedo o código for, mais cedo ele será executado, principalmente se for a página. o código é longo e você deseja que a página apareça mais cedo.
[2. Janela pop-up após configuração]
Vamos falar sobre as configurações das janelas pop-up. Basta adicionar um pouco mais ao código acima. Vamos personalizar a aparência, o tamanho e a posição pop-up desta janela pop-up para se adequar às condições específicas da página.
<LINGUAGEM DO SCRIPT=javascript>
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, barra de ferramentas=não, barra de menu=não, barras de rolagem=não, redimensionável=não,localização=não , status=não')
//Escreve em uma linha
-->
</SCRIPT>
Explicação do parâmetro:
<SCRIPT LANGUAGE=javascript> script js é iniciado;
comando window.open para abrir uma nova janela;
'page.html' O nome do arquivo da janela pop-up;
'newwindow' O nome da janela pop-up (não o nome do arquivo), opcional, pode ser substituído por '' vazio;
altura=100 altura da janela;
largura = largura da janela 400;
top=0 valor de pixel acima da janela da tela;
left=0 O valor do pixel da janela do lado esquerdo da tela;
barra de ferramentas=não se deseja exibir a barra de ferramentas, sim para exibir;
barra de menu, as barras de rolagem representam barras de menu e barras de rolagem.
redimensionável=não se permite que o tamanho da janela seja alterado, sim para permitir;
location=no se deseja exibir a barra de endereço, sim para permitir;
status=no se deseja exibir as informações na barra de status (geralmente o arquivo foi aberto), sim é permitido;
</SCRIPT> script js termina
[3. Use funções para controlar janelas pop-up]
Abaixo está um código completo.
<html>
<cabeça>
<script LANGUAGE=javascript>
<!--
função openwin() {
window.open (página.html, nova janela, altura = 100, largura = 400, barra de ferramentas = não, barra de menu = não, barras de rolagem = não, redimensionável = não, localização = não, status = não)
//Escreve em uma linha
}
//-->
</script>
</head>
<corpo onload=openwin()>
..conteúdo arbitrário da página...
</body>
</html>
Uma função openwin() é definida aqui e o conteúdo da função é abrir uma janela. Não serve para nada até que seja chamado.
Como chamá-lo?
Método 1: <body onload=openwin()> Uma janela aparece quando o navegador lê a página;
Método 2: <body onunload=openwin()> Uma janela aparece quando o navegador sai da página;
Método 3: Ligue com uma conexão:
<a href=Nota: Use o "Método 4: Chamada com um botão:
<input type=button onclick=openwin() value=open window>
[4.2 janelas aparecem ao mesmo tempo]
Faça pequenas alterações no código-fonte:
<script LANGUAGE=javascript>
<!--
função openwin() {
window.open (página.html, nova janela, altura = 100, largura = 100, topo = 0, esquerda = 0, barra de ferramentas = não, barra de menu = não, barras de rolagem = não, redimensionável = não, localização = não, status = não)
//Escreve em uma linha
window.open (página2.html, novajanela2, altura=100, largura=100, topo=100, esquerda=100, barra de ferramentas=não, barra de menu=não, barras de rolagem=não, redimensionável=não, localização=não, status=não)
//Escreve em uma linha
}
//-->
</script>
Para evitar que as duas janelas pop-up se cubram, use o topo e a esquerda para controlar a posição do pop-up para que não se cubram. Finalmente, você pode chamá-lo usando os quatro métodos mencionados acima.
Nota: Os nomes das duas janelas (novas janelas e nova janela2) não devem ser iguais ou devem estar todas vazias. OK?
[5. A janela principal abre o arquivo 1.htm, e a pequena janela page.html aparece ao mesmo tempo]
O seguinte código é adicionado à área <head> da janela principal:
<script language=javascript>
<!--
função openwin() {
janela.open(página.html,,largura=200,altura=200)
}
//-->
</script>
Adicione a área <body>:
Basta <a href=1.htm onclick=openwin()>abrir</a>.
[6. Controle de tempo de fechamento das janelas pop-up]
A seguir, realizaremos algum controle nas janelas pop-up e o efeito será melhor. Se adicionarmos um pequeno pedaço de código à página pop-up (observe que ele é adicionado ao HTML de page.html, não à página principal, caso contrário...), não seria mais legal se ela fechasse automaticamente após 10 segundos?
Primeiro, adicione o seguinte código à área <head> do arquivo page.html:
<script language=javascript>
function closeit() {
setTimeout(self.close(),10000) //Milisegundos
}
</script>
Em seguida, use a frase <body onload=closeit()> para substituir a frase <BODY> original em page.html. (Não se esqueça de escrever esta frase! A função desta frase é chamar o código para fechar a janela e, em seguida, fechar a janela automaticamente após 10 segundos.)
[7.
<FORM>
<INPUT TYPE='BUTTON' value='Fechar' onClick='window.close()'>
</FORM>
Haha, está ainda mais perfeito agora!
[8. Janelas pop-up incluídas - duas janelas em uma página]
Todos os exemplos acima contêm duas janelas, uma é a janela principal e a outra é uma pequena janela pop-up.
Através do exemplo a seguir, você pode completar o efeito acima em uma página.
<html>
<cabeça>
<LINGUAGEM DO SCRIPT=javascript>
função openwin()
{
OpenWindow=window.open(, newwin, altura=250, largura=250,barra de ferramentas=não,barras de rolagem=+rolar+,barra de menu=não);
//Escreve em uma linha
OpenWindow.document.write(<TITLE>Exemplo</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Olá!</h1>)
OpenWindow.document.write(Nova janela aberta!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<corpo>
<a href=<input type=button onclick=openwin() valor=Abrir janela>
</body>
</html>
Veja o código em OpenWindow.document.write(). Não é HTML padrão? Basta escrever mais linhas de acordo com o formato. Certifique-se de observar que ocorrerá um erro se houver mais um rótulo ou menos. Lembre-se de finalizar com OpenWindow.document.close().
[9. Aplicativo final - Controle de cookies de janelas pop-up]
Lembre-se de que, embora a janela pop-up acima seja legal, ela tem um pequeno problema (você não deve ter notado se está imerso na alegria?) Por exemplo, se você colocar o script acima em uma página que precisa ser passada com frequência (como a página inicial), a janela aparecerá toda vez que a página for atualizada. Não é muito chato? :-(
Existe alguma solução? Sim ;-) Siga-me.
Podemos usar cookies para controlá-lo.
Primeiro, adicione o seguinte código à área <HEAD> da página principal HTML:
<script>
função openwin(){
janela.open(página.html,,largura=200,altura=200)
}
função get_cookie(Nome) {
var pesquisa = Nome + =
var valor de retorno = ;
if (documentos.cookie.length > 0) {
deslocamento = documentos.cookie.indexOf(pesquisa)
if (deslocamento! = -1) {
deslocamento += pesquisa.comprimento
fim = documentos.cookie.indexOf(;, deslocamento);
se (fim == -1)
fim = documentos.cookie.comprimento;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
retornar valor de retorno;
}
função carregarpopup(){
if (get_cookie('popped')==''){
abrirwin()
documentos.cookie=popped=sim
}
}
</script>
Em seguida, substitua a frase <BODY> original na página principal por <body onload=loadpopup()> (observe que não é openwin, mas sim loadpop!). Você pode tentar atualizar a página ou acessá-la novamente e a janela nunca mais aparecerá. Verdadeiro pop apenas uma vez!
Neste ponto, as habilidades de produção e aplicação de janelas pop-up estão basicamente concluídas. Também estou exausto. Espero que seja útil para amigos que estão criando páginas da web. .
Deve-se observar que é melhor manter consistente a capitalização em scripts JS.
1. Abra uma janela em tela cheia
<html>
<body onload=window.open('http://www.pconline.com.cn','example01','fullscreen');>;
<b>[url]www.e3i5.com[/url]</b>
</body>
</html>
2. Abre uma janela que foi F11izada
<html>
<body onload=window.open(''http://www.pconline.com.cn','example02','channelmode');>;
<b>[url]www.e3i5.com[/url]</b>
</body>
</html>
3. Abre uma janela com uma barra de ferramentas de link favorito
<html>
<body onload=window.open('http://www.pconline.com.cn','example03','width=400,height=300,directories');>
<b>[url]www.e3i5.com[/url]</b>
</body>
</html>
4. Caixa de diálogo da página da Web
<html>
<LINGUAGEM DO SCRIPT=javascript>
<!--
showModalDialog('http://www.pconline.com.cn','example04','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b>[url]www.e3i5.com[/url]</b>
</body>
</html>
<html>
<LINGUAGEM DO SCRIPT=javascript>
<!--
showModelessDialog('http://www.pconline.com.cn','example05','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
<b> target=_blank>[url]http://www.pconline.com.cn[/url]</b>
</body>
</html>
showModalDialog() ou showModelessDialog() para chamar a caixa de diálogo da web A diferença entre showModalDialog() e showModelessDialog() é que a janela aberta por showModalDialog() (janela modal abreviada) é colocada na janela pai e deve ser fechado. para acessar a janela pai (recomenda-se usá-la o mínimo possível para evitar ofender as pessoas); showModelessDialog() (referida como janela sem janela restrita), você pode acessar a janela aberta pela janela pai sem fechá-la. após a abertura.
dialogHeight: iHeight define a altura da janela de diálogo.
dialogWidth: iWidth define a largura da janela de diálogo.
dialogLeft: iXPos define a posição esquerda da janela de diálogo em relação ao canto superior esquerdo da área de trabalho.
dialogTop: iYPos define a posição superior da janela de diálogo em relação ao canto superior esquerdo da área de trabalho.
center: {sim | não | 1 | 0} Especifica se a caixa de diálogo deve ser centralizada na área de trabalho.
ajuda: {sim | não 1 | 0 } Especifica se os ícones de ajuda sensíveis ao contexto devem ser exibidos na janela de diálogo. O valor padrão é “sim”.
redimensionável: {sim | não 1 | 0} Especifica se a janela de diálogo é redimensionável. O valor padrão é "não".
status: {sim | não 1 | 0} Especifica se a janela de diálogo exibe uma barra de status. O valor padrão é "sim" para janelas de diálogo sem janela restrita e "não" para janelas de diálogo modais.
Código clássico da página da web
1. O botão direito do mouse ficará completamente bloqueado e não haverá menu do botão direito.
<body oncontextmenu=window.event.returnvalue=false>
também pode ser usado no quadro Tabela em páginas da web
<table border oncontextmenu=return(false)><td>não</table>
2. Desmarque e evite a cópia
<corpo onselectstart=return falso>
3. Não é permitido colar
<body onpaste=return falso>
4. Evite cópias
<corpo oncopy=retornar falso; oncut=retornar falso;>
5. Altere a barra de endereço do IE para o seu próprio ícone
<link rel=Ícone de atalho href=favicon.ico>
Descrição: Sobre a produção do arquivo favicon.ico. Você pode primeiro criar uma imagem no FW, um pequeno ícone para o seu próprio site. Em seguida, altere os atributos do arquivo para *.ico no ACD e, em seguida, transfira o arquivo *.ICO que você criou para o diretório do servidor. Em seguida, você pode usar o código acima para fazer isso quando outras pessoas fizerem login no seu site. barra Use seu ícone personalizado.
6. Seu ícone pode ser exibido nos favoritos
<link rel=Bookmark href=favicon.ico>
Instruções: O método de produção é o mesmo acima. Só que o método de exibição é diferente. Este é o ícone personalizado exibido quando outras pessoas marcam seu endereço da web.
7. Feche o método de entrada
<input style=ime-mode:disabled>
Explicação: Este código é usado ao enviar o formulário. Ou seja, outros modos de método de entrada não podem ser usados ao inserir dados.
8. Sempre carregue uma estrutura
<linguagem de script=javascript><!--
if (window == top)top.location.href = frames.htm;// --></script>
Explicação: frames.htm é sua página da web. Esta também é uma forma de proteger a página.
9. Evite ser enquadrado
<SCRIPT LANGUAGE=javascript><!--
if (top.location! = self.location)top.location=self.location;
// --></SCRIPT>
10. As páginas da web não serão salvas como
<noscript><iframe src=*.html></iframe></noscript>
Observação: <noscirpt> tem uma ampla gama de usos, um dos quais é invalidar anúncios JS.
11. Verifique os arquivos de origem
<input type=button value=Ver código-fonte da página da web
onclick=window.location = 'fonte de visualização:'+ target=_blank>[url]http://bbs.055.cn/test.htm[/url]';>
12. O registro do script COOKIE é muito útil
function get_cookie(Name) {
var search = Name + =
var returnvalue = ;
if (documents.cookie.length > 0) {
offset =documents.cookie.indexOf(search)
if (offset != -1) { // se o cookie existir
offset += search. length
// define o índice de início do valor
end =documents.cookie.indexOf(
;, offset);
//define o índice de fim do valor do cookie
if (end == -1)
end =documents.cookie.length;
(documents.cookie.substring(offset, end))
}
}
return valor de retorno
}
function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
documents.cookie=popped=yes
}
}
Observação: o código acima é JS, adicione você mesmo os caracteres de início e fim
13. Uso do quadro interno <IFRAME>
O formato de uso da tag Iframe é:
<iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x
nome=principal></iframe>
src: O caminho do arquivo, que pode ser um arquivo HTML, texto, ASP, etc.
largura, altura: largura e altura da área interna da moldura;
rolagem: Quando o arquivo HTML especificado do SRC não é exibido na área especificada, a opção de rolagem, se definida como NÃO, a barra de rolagem não aparecerá se for Auto: a barra de rolagem aparecerá automaticamente se for Sim; será exibido; FrameBorder: A largura da borda da área para mesclar o "quadro interno" com o conteúdo adjacente, geralmente é definido como 0.
nome: O nome da estrutura, usado para identificação.
Por exemplo: Quando quiser usar o quadro pai para controlar o quadro interno, você pode usar: target=nome do quadro para controlar.
Exemplo: <iframe name=mm src=http://bbs.055.cn;; width=100% height=100% marginwidth=0 marginheight= ... ot
; .Adicione o seguinte código para pular automaticamente para <head>…</head> no código-fonte:
<meta http-equiv=refreshcontent=3;URL=http://bbs.055.cn; charset=gb2312>
Explicação: content=3 significa atualizar para o URL em 3 segundos
15. Como alterar o formato do mouse de um link? Basta adicionar este código ao link ou você pode escrevê-lo em CSS como acima
style=cursor:hand style=cursor:crosshair
estilo=cursor:texto estilo=cursor:espera
estilo=cursor:mover estilo=cursor:ajuda
estilo=cursor:e-redimensionar
estilo=cursor:n-redimensionar
estilo=cursor:nw-redimensionar estilo=cursor:w-redimensionar
estilo=cursor:s-redimensionar
estilo=cursor:se-redimensionar
style=cursor:sw-resize
Você só precisa adicionar o código acima ao link ou à área de estilo da página para diversificar o mouse.
16. Exibição em tela cheia
<formulário>
<div alinhar=centro>
<input type=BUTTON name=FullScreen value=Tela inteira onClick=window.open(document.location, 'big', 'fullscreen=yes')>
</div>
</form>
Coloque-o na área <body>.
17. Defina como página inicial
<script language=javascript>
<!--
função padrão_home(){
this.home.style.behavior='url(#default#homepage)';this.home.setHomePage([url]http://bbs.055.cn/[/url]';
}
var focusok=falso;
if (navigator.appName == Netscape{
focook = verdadeiro;
}
vers=navigator.appVersion;
if (navigator.appName ==Microsoft Internet Explorer{
pos=vers.lastIndexOf('.');
vers=vers.substring(pos-1,vers.length);
}
versão_adequada=parseFloat(vers);
if(versão_adequada>=5){
focook = verdadeiro;
}
função lançamentostock1(htmlurl){
var stock=window.open(htmlurl,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
redimensionável=não,largura=700,altura=510;
if(focook){
estoque.foco();
}
retornar verdadeiro;
}
função lançamentostock(){
var stock=window.open(,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
resizable=no,width=700, altura=510;
if(focook){
estoque.foco();
}
retornar verdadeiro;
}
// -->
</script>
<a href=# name=home onClick=defaul_home() title===Tempo de geração==>Definir como página inicial</a>;
18. Aqui está o código para adicionar favoritos
<a href=# onClick=window.external.addFavorite([url]http://bbs.055.cn[/url]';.'Dawn Accord') target=_self title = Dawn Accord>Adicionar aos Favoritos</a>
19. O seguinte código para efeitos de imagem flash é adicionado à área <head>
<linguagem SCRIPT=javascript>
<!--
função tornar visível(cur,que){
se (qual==0)
cur.filters.alpha.opacity=100
outro
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
O código a seguir é adicionado à área <body>
<img src=/u/info_img/2009-06/08/logo.gif;; style=filte ... nbsp;onMouseOver=makevisible(this,0) onMouseOut=makevisible(this,1) width=63 height=56 > //Por favor, altere você mesmo o endereço da imagem
20. barra de progresso de carregamento
<table cellpacing=0 cellpadding=0 bgcolor=#FFFFFF width=40% id=P><tr><td>
<table cellpacing=0 cellpadding=0 bgcolor=#0000FF height=18 id=Q><tr><td></td></tr></table></td></tr></table>
</centro>
<linguagem de script=javascript>
var R = 0;
função carregar() {R = R + 2.estilo.largura = R + % tempo= setTimeout(carga(),50);
se (R > 100) {clearTimeout(tempo);
</script>
27 tela cheia
<linguagem de script=javascript>
window.open('index.asp','','fullscreen=1');
</script>
21. Rolagem da imagem de fundo
<body scroll=no background=images/bg.jpg link=#00FF00 alink=#FF0000 vlink=#00FF00 bgcolor=#000080 topmargin=8>
<linguagem de script=javascript>
var backgroundOffset = 0;
var bgObject = eval('document.body');
função scrollBG (maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = 0 + backgroundOffset;}
varScrollTimer = window.setInterval(scrollBG(410), 20)
</script>
22. As páginas da Web não serão
páginas HTML
armazenadas em cache
<META HTTP-EQUIV=pragma CONTENT=no-cache>
<META HTTP-EQUIV=Cache-Control CONTENT=sem cache, deve-revalidar>
<META HTTP-EQUIV=expira CONTENT=Quarta, 26 de fevereiro de 1997 08:21:57 GMT>
Ou <META HTTP-EQUIV=expira CONTENT=0>
Página da web ASPResponse.Expires = -1
Response.ExpiresAbsolute = Agora() - 1
Response.cachecontrol = sem cache
Página PHP
cabeçalho (Expira: segunda-feira, 26 de julho de 1997, 05:00:00 GMT;
header(Cache-Control: sem cache, deve-revalidar;
cabeçalho(Pragma: sem cache;
23.
<%
'Define algumas constantes para conexão com o banco de dados
Const adOpenForwardOnly = 0 'O cursor apenas navega pelos registros para frente e não suporta paginação, Recordset, BookMark
Const adOpenKeyset = 1 'Cursor do conjunto de chaves, as modificações feitas por outros usuários nos registros serão refletidas no conjunto de registros, mas os registros adicionados ou excluídos por outros usuários não serão refletidos no conjunto de registros. Paginação de suporte, conjunto de registros, BookMark
Const adOpenDynamic = 2 'Os cursores dinâmicos têm as funções mais poderosas, mas também consomem mais recursos. Modificações feitas pelos usuários nos registros, adição ou exclusão de registros serão refletidas no conjunto de registros. Suporta navegação completa (não suportada pelo ACCESS).
Const adOpenStatic = 3 'Cursor estático é apenas um instantâneo dos dados. Modificações feitas pelo usuário nos registros, adicionar ou excluir registros não serão refletidos no conjunto de registros. Suporta avançar ou retroceder
Const adLockReadOnly = 1 'Tipo de bloqueio, padrão, somente leitura, nenhuma modificação pode ser feita
Const adLockPessimistic = 2 'Bloqueia o registro imediatamente ao editar, a maneira mais segura
Const adLockOptimistic = 3 'O conjunto de registros é bloqueado somente quando o método Update é chamado e outras operações anteriores ainda podem alterar, inserir e excluir o registro atual.
Const adLockBatchOptimistic = 4 'Os registros não são bloqueados durante a edição e as alterações, inserções e exclusões são feitas em modo lote
Const adCmdText = &H0001
Const adCmdTable = &H0002
%>
24. Minimize, maximize e feche janelas
<id do objeto=hh1 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Command value=Minimizar></object>
<id do objeto=hh2 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Command value=Maximizar></object>
<ID DO OBJETO=hh3 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11>
<PARAM NAME=Valor do comando=Fechar></OBJECT>
<tipo de entrada=valor do botão=minimizar onclick=hh1.Click()>
<tipo de entrada=valor do botão=maximizar onclick=hh2.Click()>
<input type=button value=Close onclick=hh3.Click()>
Nota: Este exemplo é adequado para IE
25. Determine a origem da
página asp da página anterior:
request.servervariables(HTTP_REFERER
javascript:
documento.referenciador
26. O cursor é parado no final do texto na caixa de texto
<script language=javascript>
funçãocc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('caractere',e.valor.comprimento);
r.collapse(verdadeiro);
r.select();
}
</script>
<input type=text name=text1 value=123 onfocus=cc()>
Descrição: Adequado para envio de dados de formulário