Muitas pessoas sempre tiveram a ideia de que seria ótimo se pudessem operar iframes como quisessem. Dessa forma, as páginas estáticas têm a capacidade de implementar um layout unificado de várias páginas equivalente a incluir e exigir páginas dinâmicas em segundo plano php, jsp e asp.
Com a ajuda de Javascript, podemos carregar dinamicamente o conteúdo da página html apontada pelo atributo do objeto iframe src como um plano de fundo. Tal operação requer o fornecimento de duas páginas, uma página é a página onde o iframe está localizado ( nome da página: iPage.html ) e a outra página é a página apontada pelo atributo iframe src ( nome da página: srcPage.html ).
iPage.html, dom em <body>:
,<body>in
Vamos discutir como operar as duas páginas acima com JS no IE e então discuta o método do Firefox e, finalmente, forneça a compatibilidade com o IE e o Firefox. O método do navegador para operar o objeto iframe.
Todo mundo sabe que iframe é uma tag HTML não padrão. É uma tag multi-layout lançada pelo navegador IE. Mais tarde, a Mozilla também suportou essa tag. (Fofoca, hehe)
1. O IE obtém através de document.frames["IframeName"]. Exemplo: geramos o conteúdo de h1 em srcPage.html em iPage.html. O JS é o seguinte:
descobrirá que adicionar código à página não parece produzir o material desejado. Por quê? Eu ainda não descobri isso. Eu apenas adiciono window.onload e a saída aparecerá (Nota: o código JS está escrito neste evento). Por quê? Após a alteração, o código foi gerado no IE, mas document.frames não está definido no Firefox
2. ou seja, outra maneira é contentWindow de obtê-
Este método passou nos testes do IE6, IE7, Firefox2.0 e Firefox3.0. ei, ei. (Depois de verificar online, encontrei uma vulnerabilidade de buffer overflow no Mozilla Firefox iframe.contentWindow.focus, que representa o risco de ataques de injeção de script.
Mais tarde, ouvi dizer que isso poderia ser evitado em segundo plano e fiquei aliviado. No entanto, ainda espero que a nova versão do Firefox possa resolver esse
perigo
acesse-o através do contentWindow Os nós são os mesmos de antes.
O Mozilla suporta o padrão W3C para acessar o objeto de documento de um iframe através de IFrameElmRef.contentDocument . Através do padrão, você pode escrever um documento a menos, código:
Um método compatível com esses dois navegadores está agora disponível, que é usar o método contentWindow.
ei, ei! Posso operar o iframe como desejo? Se ainda se sentir desconfortável, você pode até reescrever o conteúdo no iframe.
Por meio de designMode (definir o documento para modo de design editável) e contentEditable (definir o conteúdo como editável), você pode reescrever o conteúdo no iframe. Código:
us/library/ms533720(VS.85).aspx
firebug testa o desempenho do código acima, conforme mostrado na figura
Comente iObj.document.designMode = 'On
'
;
O efeito não mudou e a eficiência do tempo é quase três vezes maior que antes da anotação. ei, ei. Esses dois objetos referem-se aos métodos de escrita de algumas pessoas na Internet para reescrever o conteúdo no iframe. Na verdade, não há necessidade de usar designMode e contentEditable, a menos que haja outras necessidades.
Com os princípios acima, é bastante simples implementar isso, basta definir o valor da altura do iframe para o valor da altura do documento dentro dele. Código:
por causa desse termo técnico da Web, ei, fedorento!
Materiais de referência:
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx