Como o DiggBar redimensionar dinamicamente a altura de sua iframe com base no conteúdo e não em seu domínio?

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

Pergunta

Alguém já perguntou: Como funciona o DiggBar? em uma pergunta anterior .

Enquanto alguém forneceu uma resposta decente que não abordou uma coisa:

Como o Digg redimensionar dinamicamente a sua altura iframe de, com base no conteúdo de um site em um domínio diferente?

Há uma abundância de perguntas e respostas aqui no SO para ajustar dinamicamente uma altura iframe baseado fora de conteúdo (usando javascript) contanto que o url moldado é em seu próprio domínio. No entanto, Digg parece ter resolvido este problema com sites de qualquer domínio.

Faça qualquer SO programadores web tem alguma idéia de como eles conseguiram isso?

Nota: O iframe não é simplesmente definida como altura de 100%. A tag iframe simplesmente não funciona assim. Google "altura de 100% iframe" e você verá o que quero dizer.

Foi útil?

Solução

Se você olhar para sua CSS , eles usam height: 100% para o iframe: 

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

Eles posicionar o DiggBar acima que, com uma altura de 46px, de modo que o leva iframe 100% do espaço restante. Eles usam overflow: hidden no elemento body para manter o iframe inteiramente dentro da altura vertical da página, em vez de permitir a página para rolagem. Isto significa que a barra de rolagem aparecerá dentro da iframe, em vez de para a página inteira. Note que a forma como o DiggBar faz isso só funciona no modo de peculiaridades no Firefox; veja abaixo como fazê-lo no modo de padrões. 

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

Editar : Para aqueles que não acreditam em mim, aqui é um pequeno exemplo . Para obtê-lo para preencher o espaço inteiro, você precisará configurá-lo para não ter nenhum fronteira, e você precisa <body> não ter margens.

Editar 2 : Ah, desculpe, eu vejo o que você estava falando. Você precisa do overflow: hidden na etiqueta body para obter a barra de rolagem para trabalhar da maneira que quiser.

editar 3 : Parece que você tem que estar em peculiaridades modo para que isso funcione no Firefox; se você incluir uma declaração <!DOCTYPE html>, que o coloca em modo de padrões, e seu iframe sai muito pequeno.

editar 4 : Ah, você pode fazê-lo no modo de padrões no Firefox também. Tenho a resposta aqui . Você precisa definir a altura de suas <html> e <body> elementos para 100% também. (Note que o <!DOCTYPE html> é o doctype para HTML 5 , que é um trabalho em andamento; no entanto, ele funciona em todos os navegadores modernos para ligar o modo de padrões). 

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

Outras dicas

Parte do problema com HTML você não pode apenas definir um elemento de qualquer coisa a altura de 100% e tê-lo ocupar todo o espaço da janela. Uma maneira de fazer isso é fazendo o corpo tem uma altura pixel da janela e qualquer coisa dentro do conjunto de corpo a 100% será o tamanho da janela.

Basicamente basta fazer um JavaScript que os laços para as janelas OnResize evento e tê-lo redimensionar o corpo para o tamanho da janela.

aqui está um exemplo que eu fiz usando jQuery 

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

Com isso, você será capaz de definir um div ou mais elementos e tê-lo trabalhar em toda a altura da janela.

Um iframe pode ter altura de 100% no modo de peculiaridades. Digg consegue isso deixando de fora o tipo de documento.

O iFrame é no site do Digg com o site-alvo dentro, e não o contrário. O iFrame é definida como 100% de largura e altura.

100% em um iframe é um por cento de 100% do espaço pai declarado. Um exemplo é: 

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top