Problema ao utilizar getElementByID com iFrame

pradol · Outubro 1, 2014

Sou iniciante em javascript e gostaria de pedir ajuda com um problema.

Tenho 3 arquivos.

1. Tutorial.js

var point = pair.formattedValue;

document.getElementById('test').value = point;

2. tab.html

 <input type="text" id='test' name='test'> </input>

Ao executar, consigo o resultado desejado, exibir a variavel "point" dentro do textbox.

Ao tentar usar o mesmo textbox, dessa vez dentro de um iFrame, não consigo obter o mesmo resultado. O textbox aparece vazio. Essa foi a minha modificacao na pagina "tab.html" e "paragrafo.html"

2. tab.html

 <iframe src="paragrafo.html"></iframe>

3. paragrafo.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="tutorial.js"></script>
</head>
<body>
<input type="text" id='test' name='test'> </input>
 
</body>

essa e' a forma correta de obter o resultado? aceito sugestoes para melhoramento do processo.

obrigado

Sandro2011 · Outubro 1, 2014

Acho que não é possivel assim. Pelo que eu entendi você quer passar um valor (point) para dentro do frame, mas SEM dar refresh na página principal?

E no Frame? pode dar refresh? se sim, o que você pode fazer é colocar no seu URL algo como paragrafo.html?point=valor aqui,

e trabalhar o Javascript para alterar a URL e depois dar refresh no Frame.

No codigo destino você pega a variável por GET. Tem umas funções para fazer isso com javascript, através de 'fatiamento' da URL, procura no google algo como 'pegar variavel via GET com javascript'

pradol · Outubro 1, 2014

Acho que não é possivel assim. Pelo que eu entendi você quer passar um valor (point) para dentro do frame, mas SEM dar refresh na página principal?

E no Frame? pode dar refresh? se sim, o que você pode fazer é colocar no seu URL algo como paragrafo.html?point=valor aqui,

e trabalhar o Javascript para alterar a URL e depois dar refresh no Frame.

No codigo destino você pega a variável por GET. Tem umas funções para fazer isso com javascript, através de 'fatiamento' da URL, procura no google algo como 'pegar variavel via GET com javascript'

Sandro, obrigado pela resposta.

Para tentar responder a sua pergunta sobre o refresh, inclui o url de um screenshot da pagina.

Pelo que entendi, o iframe deve ser executado antes que o seu conteudo seja exibido. O problema e' que o conteudo exibido pelo iframe e' decorre de um click na pagina. anexei a foto abaixo que mostra a sequencia de eventos que estou tentando alcancar.

1. click no botao initiate exibe o grafico no topo da pagina.

2. click em qualquer barra do grafico salva a variavel "point" e a exibe no textbox dentro do iframe.

obviamente o passo 3 não funciona, a não ser que tire o textbox de dentro do iframe.

screenshot da pagina ->

Sandro2011 · Outubro 1, 2014

2. click em qualquer barra do grafico salva a variavel "point" e a exibe no textbox dentro do iframe.

Neste ponto você pega o 'point' e adiciona na URL do frame. A URL do frame você pode guardar dentro de uma variável global com Javascript. tipo:

var frame_URL="http://www.dominio.com.br/paragrafo.html?point=";

e quando clicar no grafico, você concatena o point, algo assim: (não sei como está organiado seu codigo, mas é só exemplo)

var frame_URL="http://www.dominio.com.br/paragrafo.html?point=";

function Identifica(campo) {
var nome = campo.name;
frame_URL = frame_URL + nome; 
window.getElementById('id_do_iframe').location = frame_URL;
}
...
...
...
<div id="seugrafico" name="5" onclick="Identifica(this);";

nesse codigo em cima, o valor do name eu joguei o valor que você precisa enviar... ficaria assim name="valor_aqui" para cada gráfico...

e depois altera a URL do frame e recarrega

Se funcionar... avisa!

pradol · Outubro 1, 2014

2. click em qualquer barra do grafico salva a variavel "point" e a exibe no textbox dentro do iframe.

Neste ponto você pega o 'point' e adiciona na URL do frame. A URL do frame você pode guardar dentro de uma variável global com Javascript. tipo:
var frame_URL="http://www.dominio.com.br/paragrafo.html?point=";
e quando clicar no grafico, você concatena o point, algo assim: (não sei como está organiado seu codigo, mas é só exemplo)
var frame_URL="http://www.dominio.com.br/paragrafo.html?point=";

function Identifica(campo) {
var nome = campo.name;
frame_URL = frame_URL + nome; 
window.getElementById('id_do_iframe').location = frame_URL;
}
...
...
...
<div id="seugrafico" name="5" onclick="Identifica(this);";
nesse codigo em cima, o valor do name eu joguei o valor que você precisa enviar... ficaria assim name="valor_aqui" para cada gráfico...

e depois altera a URL do frame e recarrega

Se funcionar... avisa!

@sandro2011

Mais uma vez agradeco pela resposta. Infelizmente não obtive sucesso. resolvi copiar o codigo na tentativa de facilitar a compreensao.


var viz, workbook, activeSheet;
var frame_URL = "paragraph.html?point=";

function initializeViz() {
  var placeholderDiv = document.getElementById("tableauViz");
  var url = "_____________";
  var options = {
    width: placeholderDiv.offsetWidth,
    height: placeholderDiv.offsetHeight,
    hideTabs: true,
    hideToolbar: true,
    onFirstInteractive: function () {
      workbook = viz.getWorkbook();
      activeSheet = workbook.getActiveSheet();
    }
  };
  tableauViz = new tableauSoftware.Viz(placeholderDiv, url, options);
}

function listenToMarksSelection() {
  tableauViz.addEventListener(tableauSoftware.TableauEventName.MARKS_SELECTION, onMarksSelection);	
}

function onMarksSelection(marksEvent) {
  return marksEvent.getMarksAsync().then(reportSelectedMarks);
}

function reportSelectedMarks(marks) {
  var html = [];
  for (var markIndex = 0; markIndex < marks.length; markIndex++) {
	var pairs = marks[markIndex].getPairs();
	html.push("<b>Mark " + markIndex + ":</b><ul>");
	for (var pairIndex = 0; pairIndex < 1; pairIndex++) {
		var pair = pairs[pairIndex];
		var point = pair.formattedValue;
		document.getElementById('test').innerHTML = "CU = " + pair.formattedValue;
	}
	html.push("</ul>");
  }
  
}


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Tableau</title>
  <link type="text/css" rel="stylesheet" href="jquery-ui-1.10.0.custom.css" />
  <link type="text/css" rel="stylesheet" href="tutorial.css" />
  <script type="text/javascript" src="jquery-1.9.1.js"></script>
  <script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
  <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
  <script type="text/javascript" src="tutorial.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#tabs").tabs();  
      $("#startDemoButton").button().click(startDemo);
    });

    function startDemo() {
      $("#introDiv").fadeOut("slow", function () {
        $("#tableauViz, #tabs").fadeIn("slow");
      });
    }
  </script>
</head>
<body>
  <div id="introDiv">
    <p><button id="startDemoButton">Start</button></p>
  </div>
  <div id="tableauViz" class="ui-widget-content ui-corner-all"></div>
  <div id="tabs">
  <table width=100%>
  	<td>
		<div id="step1">
        	<p><button onclick="$('#tableauViz').html(''); initializeViz(),listenToMarksSelection()">Initiate</button></p>
    	</div>
	</td>
	<td>
		<iframe src="paragraph.html"></iframe>
			
	</td>
	</table>
  </div>
</body>
</html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script type="text/javascript" src="tutorial.js"></script>
	</head>
	<body>
		<p id='test'></p>
	</body>
</html>

Editado Outubro 1, 2014 por pradol

Entrar

Problema ao utilizar getElementByID com iFrame

Pergunta

pradol

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Sandro2011

Link para o comentário

Compartilhar em outros sites

pradol

Link para o comentário

Compartilhar em outros sites

Sandro2011

Link para o comentário

Compartilhar em outros sites

pradol

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades