HTML5 iFrame Seamless Attribute
No HTML5, a iframe tem novos atributos como' sem costura ' que devem remover os contornos e as barras de posicionamento. Já tentei, mas não parece funcionar, ainda consigo ver barras de posicionamento e contornos( estou a usar o Google Chrome como navegador), aqui está o meu código:
<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
mais uma pergunta, é possível apontar para uma secção específica da página dentro do iframe?
10 answers
O Chrome 31 (e possivelmente uma versão anterior) suporta algumas partes do atributo, mas não é totalmente suportado.
Actualizado: Outubro 2016
O atributo seamless já não existe. Ele foi originalmente proposto para ser incluído na primeira especificação HTML5, mas posteriormente caiu. Um atributo independente do mesmo nome fez uma breve participação no HTML5. 1 draft, mas que também foi abandonado em meados de 2016:
Então eu acho que a essência de tudo isso tanto do lado implementador quanto do lado web-dev é que {[[2]} como especulado não parece ser o que ninguém queria começar. Ou pelo menos é mais do que alguém queria. E de qualquer forma como @annevk diz, parece que muito disso já foi "superado pelos eventos" à luz do dom sombra.Por outras palavras: purga o atributo
seamless da tua memória, e finge que nunca existiu.
Para bem da posteridade, eis a minha resposta original de há cinco anos:
Resposta Original: abril de 2011
O atributo está em Modo de rascunho no momento. Por essa razão, nenhum dos navegadores atuais estão ainda a apoiá-la (uma vez que a execução está sujeita a alterações). Entretanto, é melhor usar o CSS para remover os contornos/barras de posicionamento da iframe:
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
Mais perfeita atributo que o que pode ser adicionado com CSS: parte do raciocínio por trás era o atributo para permitir que o conteúdo aninhado para herdar o mesmo estilos aplicados para o iframe (agindo como se o documento incorporado foi um grande aninhado dentro do elemento, por exemplo).
Por último, as versões de O Internet Explorer (8 e mais cedo) necessita de atributos adicionais para remover as bordas, barras de posicionamento e cor de fundo:<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>
De acordo com a última Recomendação W3C HTML5 (que provavelmente será a última norma HTML5) publicada hoje, já não existe nenhum atributo sem emenda no elemento iframe . Parece ter sido removida algures no processo de normalização.
De acordo com caniuse.com nenhum navegador principal suporta este atributo (mais), por isso provavelmente não o deve usar.
É possível usar o atributo semless agora, aqui eu encontrei um artigo alemão http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
E aqui está outra apresentação sobre este tópico: http://benvinegar.github.com/seamless-talk/ Tens de usar a janela.método de postMessage para comunicar entre o pai e a iframe.Na versão 32 do chrome, um contorno de 2 pixels aparece automaticamente em torno do iframes sem o atributo seamless. Pode ser facilmente removido adicionando esta regra CSS:
iframe:not([seamless]) { border:none; }
O Chrome usa o mesmo selector com estes estilos predefinidos de agente de utilizador:
iframe:not([seamless]) {
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
O IO8 removeu o suporte para o atributo iframe seamless.
- testado em Safari, HomeScreen, new WKWebView e UIWebView.
Pormenores completos e análise do desempenho de outras alterações aos OIF 8:
Só precisas de escrever
No seu código. Não há necessidade de:Sem Costura
Acabei de descobrir isto.Sem Costura = "sem costura"
Editar-isto não remove as barras de posicionamento. Estranhamente
Rolagem= "não" ainda parece funcionar em html5. Eu tentei usar a função overflow com um estilo inline como recomendado pelo html5, mas isso não funciona para mim.
Utilize o atributo frame border na sua iframe e configure-o como frame border="0" . Isso produz o visual perfeito. Talvez estejas a dizer que quero que a iframe aninhada controle antes que eu tenha barras de pergaminho. Em seguida, você precisa criar um arquivo de script JavaScript que calcula a altura menos quaisquer cabeçalhos e definir a altura. O Debounce é um plugin javascript necessário para se certificar de que o redimensionamento funciona adequadamente em navegadores mais antigos e às vezes no chrome. Isso vai levar-te na direcção certa.
Ainda em 2014 seamless iframe não é totalmente suportado por todos os navegadores principais, então você deve procurar uma solução alternativa.
Até janeiro de 2014, a sem emenda iframe ainda não é suportada pelo Firefox nem pelo IE 11, e é suportada pelo Chrome, Safari e Opera (a versão webkit)
Se quiser verificar isto e mais opções suportadas em pormenor, o local de teste HTML5 seria uma boa opção:
Http://html5test.com/results/desktop.html
Tu pode verificar diferentes plataformas, na secção de pontuação você pode clicar em cada navegador e ver o que é suportado e o que não é.
Https://gist.github.com/invernizzie/95182de86ea9dc5daa80
Irá dimensionar a iframe para o tamanho da janela (tendo em conta um conteúdo mais vasto). Ele poderia usar uma melhoria para usar a altura da janela em vez da altura do conteúdo, no caso de que o primeiro é maior.