Serialização de HTML

Agora vamos voltar a atenção para a serialização HTML corretamente em modernas aplicações Web, trabalhando em torno de alguns dos constrangimentos que enfrentamos. Problema Algumas das propriedades apresentam comportamento DOM inconsistentes, em particular, a propriedade innerHTML. InnerHTML A finalidade é extrair da criança elementos de um elemento HTML de uma forma de cadeia. O problema é que a propriedade innerHTML não gera o texto correto. Você precisa resolver isso. Teoria para entender onde a propriedade innerHTML falhar, vamos trabalhar com alguns exemplos e incremental mostrar onde reside o problema. O exemplo que será ilustrado é a adição dinâmica de um botão e campo de texto. O código fonte para que o exemplo é a seguinte.

 Fonte: / website / ROOT / artigos ajax / dhtml / inconsistent.html  Inconsistentes. InnerHTML

A função DOMInserted adiciona o botão e texto para o elemento div com o ID dynamicallyinserted. O elemento div com o ID dynamicallyinserted não tem elementos filho. Portanto, se innerHTML foram chamados, a seqüência de palavras que contenham texto. Quando o usuário pressionar o botão de inserir dinamicamente, a função DOMInserted é chamado. Use a entrada de um mesmo elemento HTML para criar um botão ou caixa de texto. O que distingue um botão de uma caixa de texto é o valor do tipo de propriedade. Para criar uma instância de elemento de entrada, use o método document.createElement. Uma vez que a instância do elemento foi instanciado e atribuído, adicioná-lo ao elemento div usando o método appendChild.

Depois de duas instâncias de entrada foram adicionados ao elemento div, você pode usar o innerHTML para recuperar o valor de seus elementos filho em HTML. O valor de innerHTML é atribuído ao elemento textarea para ilustrar o valor de HTML puro. O erro é que nenhum atributo de valor existe. Na verdade, o valor do atributo não existe, porque você que lhe é atribuído no script e é exibido no HTML, mas com respeito à propriedade innerHTML, o valor do atributo não existe. Internet Explorer gera a saída correta. Executando o mesmo código no Opera gera o mesmo erro como no Mozilla. Uma interface de usuário DHTML é totalmente dinâmico, portanto, quaisquer alterações feitas por usuários ou o script precisa ser refletido na propriedade. Solução O restante deste artigo se concentra em como resolver o problema de serialização de elementos HTML. A solução é simples, em que, para gerar o buffer, você precisa percorrer todos os elementos individualmente e gerar um buffer de tempo. O código a seguir ilustra a solução completa.

 Fonte:

A função recursiva é usada para iterar os elementos individuais e podem ser usados com todos os navegadores. A função recursiva tem um único parâmetro que representa uma instância do objeto que será introspected para propriedades e métodos. A serialização suporta apenas dois tipos de nós (element.nodeType): 1 e 3. Se você não sabe o que os vários tipos de nó são, então os números 1 e 3 não está indo para ajudá-lo. Nó do tipo 1 representa um plain vanilla elemento HTML, e tipo de nó 3 representa uma parte do texto. A serialização ignora os comentários, as directivas da página, e assim por diante, porque, geralmente, eles não são importantes para a serialização. Se o tipo de nó é 1, em seguida, um tampão é gerada para o elemento identificador e todos os seus atributos associados. Você pensaria que iterar todos os atributos que incluem o valor do atributo. Para qualquer outro navegador de Internet Explorer, os atributos que estão presentes na matriz element.attributes dependem do tipo de atributo.

Dependendo do tipo de elemento de entrada, o valor do atributo não podem fazer parte da lista, o que significa que não está acessível. Isso também significa que você precisa fazer referência a ela diretamente usando a notação element.value. O fato de que alguns elementos são exibidos e outros não é um pouco preocupante, porque você está se perguntando o que o navegador está escondendo. Se você olhar atentamente para o código-fonte ea saída gerada da página HTML inconsistente, você notará que os browsers estão lidando com um atributo de forma inconsistente: Estão faltando o evento onclick para o elemento botão gerado dinamicamente. O atributo onclick é gerado para o botão estaticamente definido, mas não para o botão gerado dinamicamente.

Você precisa se perguntar se você deseja gerar os manipuladores de eventos quando o HTML é serializado. Se você responder não, o htmlSerialize função irá verificar os eventos, testando se o atributo começa com as letras o e n. Mas não é correto para seriar os eventos? Pode-se argumentar que, se você estiver indo para serializar HTML, você precisa serializar tudo. No entanto, tudo de série é difícil, porque você precisa de alguma loja de referências função. Você não pode armazenar a implementação de uma função em um atributo, pois os atributos não podem conter avanços de linha. Sua decisão deve ser baseada no que você provavelmente quer fazer com serialização HTML, e que consiste na extracção do Estado. A solução proposta não é de forma completa, mas que resolve um contexto específico, e é isso que você precisa para perceber. Quando resolver o problema da serialização, a referência da função, há a questão de como serializar a função que lhe foi atribuído de forma dinâmica, como ilustrado no exemplo página HTML. Para fins de ilustração, vamos tentar uma serialização inicial de funções, mas você vai ver rapidamente que a serialização de funções é bastante complicada. Para serializar funções, você reescrever o htmlSerialize função da seguinte forma:

htmlSerialize: function (elemento) ( ScriptBuffer var = "";var Recursive function (elemento) (var buffer = ""; if (element.nodeType == 1) (buffer + = "<" element.nodeName + + "; didGenerateValue var = false; for (var i = 0; i <element.attributes.length; i + +) (var attr = element.attributes [i]; var name = attr.name.toLowerCase (); if (name.charAt (0) == 'o' & & name.charAt (1) == 'n') ( if (typeof (attr.Value) == "string") ( buffer + = attr.name + "= \" "attr.Value + +" \ "; ) )else if (attr.Value! = null & &! (typeof attr.Value () == "string" & & attr.value.length == 0)) (if (new String (elemento attr.name []). toLowerCase ( ) == "undefined") (buffer + = attr.name + "= \" "+ attr.Value +" \ ";) else (buffer + = attr.name +" = \ "" + elemento [attr. name] + "\";)) if (attr.name.toLowerCase () == "valor") (didGenerateValue = true;)) if (element.nodeName.toLowerCase () == "input" & &! didGenerateValue) (buffer + = "value = \" "element.value + +" \ ";) if (element.onclick) ( ScriptBuffer + = "var" + element.id + "_OnClick =" + element.onclick; buffer + = "value = \" "+ element.id +" _OnClick () \ ""; )buffer + = ">" if (element.nodeName.toLowerCase () == "textarea") (buffer + = element.value;) else (for (var i = 0; i <element.childNodes.length; i + +) (buffer + = Recursive element.childNodes ([i]);)) buffer + = "  ";) Else if (element.nodeType == 3) (buffer + = element.nodeValue;) buffer;) var buffer =" "for (var i = 0; i <element.childNodes.length; i + +) (buffer + = Recursive element.childNodes ([i]);) return buffer;)

O código em negrito na implementação vez refere-se a serialização dos manipuladores de eventos. A primeira parte do código em negrito é a declaração de um buffer de script. O buffer de script é o código que você salvou com o HTML serializado. Você precisa de ambas as partes, conforme o código de script dinamicamente unir-se quando você atribuir o HTML serializado usando a propriedade innerHTML. O segundo código em negrito é a serialização dos eventos que você declarou no momento da concepção. Se o elemento está ligado de forma dinâmica, em seguida, qualquer evento associado não é serializado. Obra A última e terceira do código em negrito é o código problemático e delicado. Na página HTML exemplo, o evento onclick foi atribuído dinamicamente quando um botão foi injetado dinamicamente. O evento onclick não foi uma seqüência de caracteres que referenciada outra chamada. O evento onclick referenciado uma função JavaScript anônimo. Porque os atributos serializados não pode conter implementações função completa, você deve serializar a função e criar uma referência para a função que se assemelha ao de serialização para o design-time HTML declaração do elemento. O evento onclick dinamicamente associados é uma função anônima e, portanto, não tem identificador. O código em negrito define uma função que é uma concatenação do id do elemento e do evento onclick. Embora o modelo dinâmico não tem id, vários eventos onclick idênticas serão gerados. Você também pode gerar um identificador aleatório e, em seguida, referência que identificador aleatório no HTML serializado.

O identificador aleatório resolve o problema do identificador de função. Mas agora existem dois amortecedores. Um buffer contém o código HTML serializado, e outro buffer contém o script que você precisa para executar de modo que as referências a função não irá gerar erros. Como você pode ver, o código agora está começando a se tornar muito complicado e frágil. É por isso que eu recomendo não serializar os acontecimentos menos que seja absolutamente necessário. Lembre-se os seguintes pontos a respeito deste artigo serialização HTML:

• serialização HTML está cheio de detalhes, exceções e pouca problemas. Por exemplo, quando a serialização usando htmlSerialize, o IE gera grande quantidade de atributos que você não definir. Isto é devido à inadimplência e torna mais difícil extrair algum HTML. Você deve presumir que a folha de estilo está gerenciando os padrões.

• Ao implementar serialização HTML, não confie soluções gerais. Trust soluções específicas que resolver problemas específicos em um determinado contexto.

• Propriedades que você atribui o método setAttribute são visíveis para os dois navegadores ao usar a propriedade innerHTML.

• modificação de conteúdo HTML que você salvar a partir do navegador, usando Salvar Como não é armazenada de forma consistente em todos os navegadores.

• Artigo 2 mostrou como serializar um objeto de JavaScript, e este artigo mostrou como serializar DHTML. Cada tipo de serialização é uma serialização específica para um único objetivo. Você precisa estar consciente desses detalhes e escolher a serialização adequada.

um artigo submetido por Sonja Lande

Isenção de responsabilidade:O nosso site não se responsabiliza pelo conteúdo deste artigo. Webarticles é uma fonte de informação livre.
Importante: Este artigo "A serialização HTML" foi traduzida por um software automático. Nós sentimos muito por quaisquer erros de ortografia que pode ter ocorrido. Obrigado pela sua compreensão.