Publicado em 27 de abr.

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

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:

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Leo Almeida· 28 de abr.

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· 29 de abr.

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· 29 de abr.

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· 29 de abr.

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">](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· 30 de abr.

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· 4 de mai.

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· 6 de mai.

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· 6 de mai.

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· 6 de mai.

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· 7 de mai.

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.