Capturando a altura de uma div carregada dentro de um iframe.

m@dDog · Abril 27, 2009

To fazendo um script para pegar a altura de uma div que é carregada dentro de um iframe.

Para pegar o tamanho, eu uso este comando:

parent.frames['nomeDoIframe'].document.getElementById('idDaDiv').offsetHeight;

Quando o iframe está carregando uma página interna, funciona corretamente. Ex:

<iframe src="pagina.html" class="" scrolling="auto" width="500" height="200" frameborder="0" name="nomeDoIframe"></iframe>

Quando o iframe está carregando uma página por HTTP, o script não funciona. Ex:

<iframe src="http://www.pagina.com.br/pagina.html" class="" scrolling="auto" width="500" height="200" frameborder="0" name="nomeDoIframe"></iframe>

Alguem sabe dizer o que fazer para funcionar?

Leo Almeida · Abril 28, 2009

Ola m@dDog,

Bom... pelo que eu saiba, o motivo do seu código não estar funcionando, é porque você está tentando acessar um domínio diferente...

o código javascript não funciona dessa forma na comunicação entre páginas de domínios diferentes. Irá aparecer um erro: "Permissão negada", ou algo semelhante

m@dDog · Abril 29, 2009

Obrigado Leo.

Já resolvi o problema do src, agora não estou mais usando o caminho por http.

Estou fazendo um script para pegar a altura de uma div de dentro de um iframe (parent.frames['iframe'].document.getElementById('div').offsetHeight).

Quando abro a página e tento pegar a altura da div dentro do iframe, funciona normalmente, mas quando excluo o elemento iframe (removeChild) e crio novamente (createElement), não consigo mais pegar a altura da div que está dentro do iframe.

Isto está acontecendo somente no Firefox, testei no IE, Safari e Opera e funcionou.

var iframe = parent.frames['iframe'];
var div = iframe.document.getElementById('div').offsetHeight; // O erro é retornado nesta linha "iframe.document is null"

Obs: separei em duas variáveis o comando anterior para saber com mais detalhes o que estava dando erro

Leo Almeida · Abril 29, 2009

Ola m@dDog,

ao invés de utilizar:

iframe.document.getElementById('div').offsetHeight;

eu costumo utilizar:

document.getElementById('nomeDoIframe').document.getElementById('div').offsetHeight;

nunca tive problemas com navegadores...

agora... não sei se é o seu caso...

mas se a função for chamada e o iframe ainda não estiver completamente carregado, pode retornar um erro semelhante...

m@dDog · Abril 29, 2009

Obrigado Leo, mas ainda não funcionou, então montei um exemplo com dois arquivos:

1º index.htm

2º firefox.htm

Lembrando que no Chrome, Safari, Opera, IE funciona.

Mas no firefox, não funciona depois que exclui o elemento e cria novamente.

Veja o exemplo, para o arquivo "index.htm".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test Firefox</title>
  <script type="text/javascript">

	  function destroiElemento(){
		  document.getElementById('principal').removeChild(document.getElementById('divDestroi'));
	  }
	  function constroiElemento(){
		  // create a new div element
		  // and give it some content
		  newDiv = document.createElement('div');
		  newDiv.innerHTML = '<iframe src="firefox.htm" scrolling="auto" width="800" height="300" frameborder="0" name="pagina" id="pagina">';

		  // add the newly created element and it's content into the DOM
		  my_div = document.getElementById('principal');
		  document.body.insertBefore(newDiv, my_div);
	  }
	  function alertHeight(){
		  var h = '';

		  try {
			 h = parent.frames['pagina'].document.getElementById('firefox').offsetHeight;
		  }catch (e) {}

		  alert ('Height: '+h+'px');
	  }
	</script>
</head>

<body>

  <div id="principal">
	<div id="divDestroi">
		<iframe src="firefox.htm" scrolling="auto" width="800" height="300" frameborder="0" name="pagina" id="pagina"></iframe>
	</div>
  </div>

  <input type="button" value="1 - Alert Height" onclick="alertHeight()"><br><br>
  <input type="button" value="2 - Destroy Element" onclick="destroiElemento()">
  <input type="button" value="3 - Create Element" onclick="constroiElemento()">

</body>
</html>

Este é o arquivo "iframe.htm"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Test</title>
</head>

<body>

<div id="firefox" style="background:#FFFF99">
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
	<span>TEST</span><br />
</div>

</body>

</html>

Aperte os botões do "index.htm" na ordem:

1, 2, 3

Depois tente:

2, 1, 3, 1

Valeu.

Visite meu site

Leo Almeida · Abril 30, 2009

Ola m@adDog,

Substitua o código...

parent.frames['pagina']

por

parent.frames[0]

Para esse caso resolve seu problema com os navegadores...

Rafael C Bueno · Maio 4, 2009

Boa tarde pessoal, então o que acontece com o maddog tbem acontece comigo e o ultimo post do Leo resolve o problema mais surgiu um outro que é o seguinte, eu soh tenho o nome do formulário como eu posso pegar a posição do formulário pelo nome dele ou pelo id ???

exemplo:

// sei que isso não existe mais, precisava 
// de algo do tipo pq o nome do formulário é dinâmico numa variável
pos = document.getPositionForm('form15');

parent.frames[pos]

ATT.

Mateus André Chies · Maio 6, 2009

Olá

Cara o seu problema é o seguinte:

Você tem uma página e dentro dela tem um iframe, e nesse iframe tem a DIV que desejas pegar a altura?ceerto?

Não é necessário utilizar o parent.nomedoframe.document.getElemtById(nomedadiv).heigth;

Pode se utulizar da seguinte maneria

var frm = document.getElementById(nomedoframe);//para pegar o objeto do iframe

var div = frm.document.getElementById(nomedadiv);//pega o objeto da div

div.heigth;//dessa meneira deve funcionar perfeitamente, se não tiver nenhum erro de sintaxe;

a clausula parente é utilizada para quando se esta dentro do iframe e desejas pegar algo da página pai,

ou seja da página onde o iframe esta

Forte Abraço

m@dDog · Maio 6, 2009

Obrigado novamente Leo, isso realmente resolveu.

Já estou abusando nas perguntas.

Mas como uso em abas, como vou saber o número do frame?

Valeu.

Ola m@adDog,

Substitua o código...
parent.frames['pagina']
por
parent.frames[0]
Para esse caso resolve seu problema com os navegadores...

Rafael C Bueno · Maio 6, 2009

Valeu Mateus mais esse forma que você está falando foi uma das primeiras que tentei e não funcionou.

ha e o que você tinha falado sobre o parent né eu saquei, mais msm tirando o parent tbem não funfa.

Acho que a única solução para o possivel bug do ff (é o que eu acho), seria da forma do Leo Almeida mais não sei ainda como tranformar a o id do iframe para posição do msm, ex: 0, 1, 2, 3.

Lembrando que o elemento iframe é exluido depois criado de novo, ai que surge o erro e não consegue mais pegar o offsetHeight.

como no exemplo do maddog

Conto com a ajuda de todos, abs.

ATT.

Rafael C Bueno · Maio 7, 2009

Bom dia pessoal ontem o forum estava fora do ar eu não deu pra mim postar minha solução mais ai está, o que acham??? sei que não é a melhor maneira mais talvez seja a única forma e outra so haverá no maximo 5 abas abertas certo? vcs acham que vai perder muito em desempenho? não né?

// método de abas da biblioteca dhtmlx
var id = parent.abacadastro.getActiveTab();	

// pega todos iframes
var number = document.getElementsByTagName('iframe');		

// quando achar a o iframe o for para e a posição do iframe passa a ser o i
for (var i = 0; i < number.length; i++) {			
	if (number[i].name == id)   break;				
};
	
var h = frames[i].document.getElementById('lista').offsetHeight;

Se alguém tiver outra solução ou dica da um toque, att.

Arquivado

Capturando a altura de uma div carregada dentro de um iframe.

Recommended Posts

m@dDog 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leo Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

m@dDog 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leo Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

m@dDog 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leo Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael C Bueno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus André Chies 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

m@dDog 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael C Bueno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael C Bueno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante