How to create content on a page that is inside the iframe using innerHTML

0

Hello,

I have the three pages listed below, one index.html (which contains an iframe), another that lists students according to the CPF entered on the previous page and javascript.

I want the function listAlumni () that loads together with the page ListAlumn.html create a button for each student corresponding to the entered CPF;

But I do not know exactly how to identify the divList div through getElementById, since I do not know iframe reference.

I have the index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SISGE - Prototipo Matricula</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="javascript.js"/>

</script>
</head>
<body>
<div id="header">
    <img src="i/logo.jpg"/>
    <iframe name="frameConteudo" class="frameConteudo" src="listaAluno.html" scrolling="no"></iframe>
</div>

</body>
</html>

the javascript code ( javascript.js )

    // JAVASCRIPT CRIADO POR RENOIR FARIA //
var cpfResponsavel;
var cepResponsavel;
var form;
function Aluno(cpf,nome,dtNasc,nomeMae,turno,escola) {
  this.cpf     = cpf;
  this.nome    = nome;
  this.dtNasc  = dtNasc;
  this.nomeMae = nomeMae;
  this.turno   = turno;
  this.escola  = escola;
}
var aluno = new Array();
aluno[0]  = new Aluno ("111","Estagiario","11/02/1994","Hayley de Paula");
aluno[1]  = new Aluno ("04050816180","Beta","11/02/1994","TIM");

function consiste(op,form) {
  switch (op) {
    case "continuar":
      if (form.CPF.value === "") {
        alert("CAMPO CPF VAZIO");
        form.CPF.focus();
        return false;
      }
      if (form.CEP.value === "") {
        alert("CAMPO CEP VAZIO");
        return false;
      }
    break;
  }
  return true;
}

function ehAlunoNovo(cpf) {
  var result = true;
  for (i = 0; i < aluno.length; i++) {
      if (aluno[i].cpf === cpf) {
        result = false;
      }
  }
  return result;
}

function continuar(form) {
  form = form;
  if (consiste("continuar",form)) {
     cpfResponsavel = form.CPF.value;
     cepResponsavel = form.CEP.value;
      if (ehAlunoNovo(cpfResponsavel)) {
         frameConteudo.location = 'alunoNovo.html';
      }
      else {
         frameConteudo.location = 'listaAluno.html';
      }
  }

  }

  function listaAluno () {
    var criarLista = "<button ";
    for (i = 0; i < aluno.length; i++) {
        if (aluno[i].cpf == cpfResponsavel) {
           criarLista += "onclick=\"selecAluno("+i+")\">" + aluno[i].nome;
        }
    }
    criarLista += "</button>";

  }

and the page contained in the iframe ( List.html )

    <!DOCTYPE html>
<html>
<head>
  <title>Lista Aluno</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
  <script type="text/javascript" src="javascript.js"/>
</head>
<body onload="listaAluno();">
<div id="divLista">
</div>
</body>
</html> 
    
asked by anonymous 06.10.2015 / 18:09

1 answer

1

Try this:

First put id in iframe:

 <iframe name="frameConteudo" id="frameConteudo" class="frameConteudo" src="listaAluno.html" scrolling="no"></iframe>

Then call it like this:

document.getElementById('frameConteudo').contentWindow.document.getElementById('divLista')
    
06.10.2015 / 18:18