O ECMAScript é o núcleo do JavaScript, mas ao usar o JavaScript na Web, o BOM (Modelo de Objeto do Navegador) é o núcleo real.
O objetivo principal da Bom é a janela, que representa uma instância do navegador.
No navegador, o objeto da janela é uma interface para JavaScript para acessar a janela do navegador e um objeto global especificado pelo ECMAScript. Ou seja, qualquer variável, objeto e função definida em uma página da web leva a janela como seu objeto global.
1. Escopo global
Como os objetos da janela desempenham o papel dos objetos globais, todos os objetos, variáveis e funções declarados no escopo global se tornarão propriedades e métodos do Windows.
Ainda há uma diferença entre definir variáveis globais e definir atributos nos objetos da janela: as variáveis globais não podem ser excluídas por meio de exclusão, enquanto os atributos definidos nos objetos da janela estão OK.
var idade = 28; window.color = "vermelho"; // No IE <9, um erro é lançado e a janela de exclusão falsa. // No IE <9, um erro é lançado e a verdadeira janela de exclusão.color é retornada em outros navegadores; // retorna alerta verdadeiro (window.age); // 28 Alert (Window.color); //indefinido
Ao adicionar atributos da janela usando instruções VAR, há uma propriedade chamada [[configurável]]. O valor dessa propriedade é definido como false; portanto, os atributos definidos dessa maneira não podem ser excluídos por excluir.
Um erro será lançado ao tentar acessar uma variável não declarada, mas, consultando o objeto da janela, você pode saber se existe uma possível variável não declarada.
// O erro é lançado aqui porque o OldValue não declara var newValue = antigoValue; // O erro não é jogado aqui porque esta é uma consulta de propriedade var newvalue = window.oldValue // alert (newValue); //indefinido
De fato, muitos objetos globais de JavaScript, como localção e navegação, são realmente propriedades de objetos de janela.
2. Relacionamento da janela e estrutura
Se a página contiver quadros, cada quadro possui seu próprio objeto de janela e será salvo na coleção de quadros.
Em uma coleção de quadros, ele pode ser acessado através de um índice numérico ou nome do quadro.
<html> <head> <title> Exemplo de quadros </ititle> </ad Head> <FrameSet linhas = "160,*"> <quadro src = "frame.htm" name = "topFrame"> <FrameSet cols = "50%, 50%"> <estrutura src = "outroframe.htm" Nome = "LeftFrame" " name = "RightFrame"> </raameset> </raameset> </html>
Para este exemplo, a estrutura acima pode ser referenciada por window.frames [0] ou window.frames ["TopFrame"]. No entanto, é melhor usar top.frames [0] para acessar a estrutura.
O objeto superior sempre aponta para a estrutura da camada mais alta (externa), ou seja, a janela do navegador. Usá -lo garante que outro quadro seja acessado corretamente em um quadro.
Outro objeto de janela oposto ao objeto superior é o pai, o objeto pai sempre aponta para a estrutura superior direta da estrutura atual.
Há também um objeto próprio , que sempre aponta para a janela. De fato, o eu e a janela podem ser usados entre si. O objetivo da introdução de objetos próprios é apenas corresponder aos objetos superior e pai.
Todos esses objetos são propriedades da janela e podem ser usados com janela.parent ou window.top.
3. Localização da janela
A maioria dos navegadores fornece Screenleft e Screontop, que são usados para representar a posição da janela em relação à esquerda e superior da tela, respectivamente. O FF fornece as mesmas informações de janela nas propriedades ScreenX e Screeny, e o Safari Mount Chorete também suporta essas duas propriedades ao mesmo tempo.
Use o código a seguir para obter as posições esquerda e superior da janela através do navegador.
var leftPos = (typeof window.screenLeft == "número")? Window.Screenleft: window.screenx; var toppos = (typeof window.screentop == "número")? Window.ScREENTOP: Window.screeny;
Vale a pena notar que no IE e na Opera, Screenleft e Screontop salvam a distância do esquerdo e superior da tela até a área visível da página representada pelo objeto da janela. No Chrome, FF e Safari, Screeny e ScreENTOP salvam os valores de coordenadas de todo o navegador na tela.
O resultado final é que os valores exatos de coordenadas na esquerda e na parte superior da janela não podem ser obtidos em condições de navegador cruzado.
Usando os métodos moveto () e moveby (), a janela pode ser movida com precisão para a nova posição. Ambos os métodos recebem dois parâmetros. moveto () recebe as coordenadas do eixo x e y, e moveby () recebe os pixels em movimento.
// mova a tela para o Moveto superior esquerdo (0,0); // mova a janela esquerda por 50px moveby (-50,0);
No entanto, esses dois métodos podem ser desativados pelo navegador. Esses dois métodos são aplicáveis apenas ao objeto de janela mais externos e não são aplicáveis às estruturas.
4. Tamanho da janela
Os navegadores principais fornecem 4 propriedades para determinar o tamanho da janela: Innerwidth, Innerhight, Outerwidth e OuterHight.
No IE9+, Safari e FF, Outterwidth e Exterrehight retornam o tamanho da própria janela do navegador (independentemente do acesso de qual estrutura), mas na ópera, os valores dessas duas propriedades representam o tamanho do contêiner de visualização da página (o tamanho de uma única janela de guia). INNERWidth e Innerhight representam o tamanho da visualização da página no contêiner (menos a largura da borda). Mas no Chrome, essas 4 propriedades representam o tamanho da viewport, em vez do tamanho do navegador.
O IE9 não forneceu os atributos para obter o tamanho da janela do navegador antes; No entanto, ele fornece informações sobre a área visual da página através do DOM.
No IE, FF, Chrome, Opera e Safari, as informações da página do Viewport são armazenadas em document.documentElement.clientWidth e Document.DocumentElement.ClientHight. No IE6, ele deve ser eficaz no modo padrão. Se for um modo promíscuo, as mesmas informações devem ser obtidas através do documento.Body.ClientWidth e Document.Body.ClientHight. O Chrome não distingue entre o modo padrão ou o modo misto.
Embora o tamanho da janela do navegador não possa ser determinado no final, o tamanho da viewport da página pode ser obtido.
var pagewidth = window.innerwidth, páginaHeight = window.innerHeight; if (typeof página largura! = "número") {if (document.compatmode == "css1compat") {páginaWidth = document.documentElement.clientWidth; PageHeight = document.documentElement.clientHeight; } else {PageWidth = document.body.clientWidth; PageHeight = document.body.clientHeight; }} alert ("Largura:" + PageWidth); alerta ("Altura:" + PageHeight);Para dispositivos móveis, Window.innerWidth e Window.innerhight seguram a visível Viewport, que é o tamanho da área da página na tela. Os navegadores móveis do IE precisam obter as mesmas informações através do document.documentElement.clientwidth e document.documentElement.clientHight.
Os métodos Resizeto () e REDRIMEDBY () podem ser usados para ajustar o tamanho da janela do navegador. Ambos os métodos recebem dois parâmetros. Resizeto () recebe a nova largura e a nova altura da janela do navegador, e o redimensionamento () recebe a diferença de largura e a diferença de altura entre a nova janela e a janela antiga.
// ajuste para 100*100 Resizeto (100.100); // Ajusta -se a 200*150 Moveby (100,50);
No entanto, esses dois métodos podem ser desativados pelo navegador. Esses dois métodos são aplicáveis apenas ao objeto de janela mais externos e não são aplicáveis às estruturas.
5. Navegue e abra janelas
O método window.open () pode abrir um URL específico ou uma nova janela do navegador. Este método recebe 4 parâmetros: URL, destino da janela, uma sequência de recursos e um valor booleano indicando se a nova página substitui a página atual.
Aparecer
Vários parâmetros
Entre eles, sim/não também pode ser usado 1/0; PixelValue é um valor específico, pixels de unidade.
Parâmetros | Faixa de valor | Descrição
Sempre abaixado | sim/não | especifique as janelas estão escondidas atrás de todas as janelas
Sempre criado | Sim/Não | Especifique o Windows suspenso em todas as janelas
dependente | sim/não | se a janela dos pais está fechada ao mesmo tempo
Diretórios | Sim/Não | As colunas de diretório de Nav2 e 3 são visíveis?
Altura | PixelValue | Altura da janela
Tocadas de atalho | Sim/Não | Defina a tecla de atalho Seguro na janela sem barra de menu
InnerHeight | pixelValue | Altura do documento de pixels na janela
Innerwidth | PixelValue | PixelWidth of Document in Window
Localização | Sim/Não | A barra de localização é visível?
Menubar | Sim/Não | A barra de menus é visível?
ExterreHeight | PixelValue | Defina a altura do pixel da janela (incluindo bordas decorativas)
Livro externo | PixelValue | Define a largura do pixel da janela (incluindo bordas decorativas)
Redicável | Sim/Não | O tamanho da janela é ajustável?
ScreenX | PixelValue | Comprimento da pixelle da janela até a borda esquerda da tela
Screeny | PixelValue | Pixelle Comprimento da janela até o limite superior da tela
barras de rolagem | sim/não | se existe uma barra de rolagem na janela
TitleBar | Sim/Não | A coluna do título da janela está visível?
Barra de ferramentas | Sim/Não | A barra de ferramentas da janela está visível?
Largura | PixelValue | Window Pixel Larth
Z-LOOK | SIM/NÃO | Se a janela flutua em outras janelas depois de ser ativada
Exemplo:
window.open ('página.html', 'newwindow', 'altura = 100, largura = 400, topo = 0, esquerda = 0, barra de ferramentas = não, menubar = não, scrollbars = não, redimensível = não, localização = não, status = não')Depois que o script for executado, Page.html será aberto no novo formulário NewWindow, com largura de 100, altura de 400, 0 pixels da parte superior da tela, 0 pixels da esquerda da tela, sem barra de ferramentas, sem barra de menu, sem barra de rolagem, sem resgate, sem barra de endereço e barra de status.
6. chamadas intermitentes e chamadas de tempo limite
O JavaScript é um idioma único, mas permite a execução do código de agendamento em um momento específico, definindo o valor do tempo limite e o tempo de intervalo. O primeiro executa o código após o tempo especificado, enquanto o último é chamado uma vez para cada tempo especificado.
Timeout Call Settimeout ()
O método setTimeout () aceita dois parâmetros, o primeiro parâmetro é uma função e o segundo parâmetro é o tempo (unidades de microssegundos), que retorna o ID numérico.
setTimeout (function () {alert ("hello!");}, 1000);Depois de chamar o setTimeout (), o método retornará um ID numérico, indicando a chamada de tempo limite e a chamada de tempo limite pode ser cancelada.
var timeoutId = setTimeout (function () {alert ("hello!");}, 1000); ClearTimeout (timeoutId);Chamada intermitente setInterval ()
O método setInterval () aceita dois parâmetros, o primeiro parâmetro é uma função, o segundo parâmetro é o tempo (unidade microssegundos) e retorna o ID numérico
setInterval (function () {alert ("hello!");}, 1000);Cancelar a chamada para ClearInterval () e aceitar um parâmetro ID de chamada intermitente
var intervalid = nulo; var span = document.createElement ("span"); // crie span node span.id = "time"; // defina o documento de ID do span.body.appendChild (span); // Adicione a função span incrementNumber () {var agora = new Date (); var timeST = agora.tolocaletimestring (); span.innerText = timeST; num ++; if (num == 10) {ClearInterval (intervalido); // O tempo permanece inalterado após dez segundos}} intervalid = setInterval (incrementNumber, 1000);Tente usar chamadas de tempo limite em vez de chamadas intermitentes
var num = 0; var max = 10; função incrementNumber () {num ++; if (num <max) {setTimeout (incrementNumber, 1000); } else {alert ("ok"); }} setTimeout (incrementNumber, 1000);7. Caixa de diálogo do sistema
Alerta de caixa de aviso ()
alerta ("Bem -vindo!");A caixa de informações confirm () tem um botão de cancelamento
if (confirm ("você concorda?")) {alert ("concordo"); } else {alert ("discordo"); }Prompt (), levando o usuário a inserir algum texto
var resultado = prompt ("Você respeita seu sobrenome?", ""); if (resultado! == null) {alert ("Bem -vindo", resultado); }A explicação detalhada acima do BOM (objeto de janela) no JavaScript é todo o conteúdo compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.