manipulação de innerHTML em JavaScript

Question

Estou desenvolvendo um código de página da web, que busca dinamicamente o conteúdo do servidor e depois coloca esse conteúdo em nós de contêiner usando algo como

container.innerHTML = content;

Às vezes tenho que sobrescrever algum conteúdo anterior neste nó.Isso funciona bem, até que o conteúdo anterior ocupe mais espaço vertical do que um novo ocuparia E um usuário rolou a página para baixo - rolou mais do que o novo conteúdo permitiria, desde sua altura.

Neste caso, a página é redesenhada incorretamente – alguns artefatos do conteúdo antigo permanecem.Funciona bem, sendo até possível se livrar de artefatos, minimizando e restaurando o navegador (ou forçando o redesenho da janela de outra forma), porém isso não parece muito conveniente.

Estou testando isso apenas no Safari (este é um site otimizado para iPhone).

Alguém tem ideia de como lidar com isso?

Answer 1

A solução mais fácil que encontrei seria colocar uma tag âncora <a> no topo do div você está editando:

<a name="ajax-div"></a>

Então, quando você altera o conteúdo do div, você pode fazer isso para que o navegador vá para sua tag âncora:

location.hash = 'ajax-div';

Use isso para garantir que o usuário não role muito para baixo quando você atualizar o conteúdo e você não deverá ter o problema em primeiro lugar.

(testado no último FF beta e no último safari)

Answer 2

Parece que o mecanismo de renderização do webkit do Safari não está reconhecendo inicialmente a alteração do conteúdo, pelo menos não o suficiente para remover o conteúdo HTML anterior.Minimizar e restaurar as janelas inicia um evento de redesenho no mecanismo de renderização do navegador.

Acho que exploraria 2 caminhos:primeiro, eu poderia usar um iframe em vez do nó de 'conteúdo' atual?Os navegadores esperam que os IFrames mudem, no entanto, como você pode ver, eles nem sempre são tão bons em alterar o conteúdo do DIV ou de outros elementos.

Em segundo lugar, talvez modificando a posição de rolagem conforme sugerido anteriormente.Você pode simplesmente mover a rolagem de volta para 0 conforme sugerido ou, se isso for muito intrusivo, você pode tentar restaurar a rolagem após a alteração do conteúdo.Subtraia a altura do nó de conteúdo antigo da posição de rolagem atual (redefinindo a rolagem do navegador para 0 do nó de conteúdo), altere o conteúdo do nó e adicione a altura do novo nó à posição de rolagem.

Palehorse está certo (não posso votar sua resposta no momento - sem pontos). Uma biblioteca de abstração como jQuery, Dojo ou mesmo Prototype pode muitas vezes ajudar com esses assuntos.Especialmente se você perceber que sua página/site está indo além da simples manipulação de DOM, você descobrirá que as ferramentas e aprimoramentos fornecidos pelas bibliotecas são de grande ajuda.

Answer 3

Parece que você está tendo problemas com o próprio navegador.Esse problema ocorre apenas em um navegador?

Uma coisa que você pode tentar é usar uma biblioteca leve como jQuery.Ele lida muito bem com as diferenças do navegador.Para definir o HTML interno para um div com o ID de recipiente você simplesmente escreveria isto:

$('#container').html( content );

Isso funcionará na maioria dos navegadores.Não sei se isso resolverá seu problema especificamente ou não, mas pode valer a pena tentar.

Answer 4

Funcionaria para definir a posição de rolagem de volta ao topo (element.scrollTop = 0;elemento.scrollLeft = 0;de cor) antes de substituir o conteúdo?

Answer 5

Defina a altura CSS do elemento como 'auto' sempre que atualizar o innerHTML.

Answer 6

Eu tentaria fazer container.innerHTML = '';container.innerHTML=conteúdo;