Jump to content
Eduardo Bueno da Silva

Como passar variável para um iframe

Recommended Posts

Eduardo Bueno da Silva

Boa Noite!

Resolvi aprender HTML/CSS/JavaScript, porém estou tendo problemas em passar uma váriavel para um iframe. Como sou novo e não sei explicar direito criei um exemplo pra ajudar vcs:

Tenho 2 arquivos HTML e 1 JavaScript

index.html

iframe.html

javascript.js

 

Eu quero clicar no botão "Add Ponto" para adicionar 1 ponto, e o valor total deve aparecer no index e no iframe, mas ele só está atualizando no index, no iframe ele continua 0.

Aqui um exemplo:

index.html

<!DOCTYPE html>
<html>
<head>
<script src="javascript.js"></script>
</head>

<body>

<a href=# onclick="addPonto()"><p>Add Ponto</p></a>
<input type="text" disabled id="pontoTotal">


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

</body>
</html>

 

javascript.js

function update(){
	document.getElementById('pontoTotal').value = pontos;
	document.getElementById('balanco').innerHTML = "BALANÇE" + pontos;
}

var pontos = 0;

function addPonto(){
	pontos = pontos + 1;
	update()
}

 

iframe.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Iframe</title>
<script src="javascript.js"></script>
<style>

</style>
</head>
<body>
	<p id="balanco">BALANÇO 0</p>
</body>
</html>

 

Share this post


Link to post
Share on other sites
13dev

Olá, encontrei alguns erros que poderão ajudar!

No index.html deverás ter o seguinte:

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<a href=# onclick="addPonto()"><p>Add Ponto</p></a>
<input type="text" disabled id="pontoTotal">


<iframe id="meuFrame" src="iframe.html"></iframe>
  <!-- carregar o javascript depois do html sempre -->
<script src="javascript.js"></script>
</body>
</html>

e no javascript.js aconselho a usares a biblioteca jquery https://jquery.com/

Onde poderás acessar o teu iframe com o seguinte código:

$("#meuFrame").contents().find("#balanco").text("BALANÇO" + pontos);

Espero ter ajudado !

 

 

Edited by 13dev

Share this post


Link to post
Share on other sites
HappyHippyHippo

eu tenho uma pergunta mais pertinente : porque o uso de iframe ?

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Eduardo Bueno da Silva
6 horas atrás, HappyHippyHippo disse:

eu tenho uma pergunta mais pertinente : porque o uso de iframe ?

Eu quero fazer algo deste tipo aqui: http://orteil.dashnet.org/cookieclicker/

Deixando menus no meio e que eu posso navegar sem atrapalhar a moeda que eu clico. Não sei se expliquei direito, mas eu não sei outra forma de fazer isso sem ser com iframe.

Share this post


Link to post
Share on other sites
HappyHippyHippo

pelo que penso que pretendes fazer, continue sem perceber a razão dos iframes. um dv é mais do que suficiente


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
JakeBass

os problemas mais comuns com iframes são:

- não são identificadas pelos motores de busca

- dificuldade a fazer debug com alguns browsers atuais

- dificuldade em gerir eventos globais.

Share this post


Link to post
Share on other sites
Eduardo Bueno da Silva
14 horas atrás, HappyHippyHippo disse:

pelo que penso que pretendes fazer, continue sem perceber a razão dos iframes. um dv é mais do que suficiente

E como eu faço para mudar só o conteúdo de uma div? Me desculpem por minha ignorância. Não faz nem uma semana que comecei a aprender isso, meus conhecimentos são mínimos :)

Share this post


Link to post
Share on other sites
JakeBass

ficaria assim, depois com CSS define-se as dimensões das divs.

<!DOCTYPE html>
<html>
<head>
<script src="javascript.js"></script>
</head>

<body>

<div>
  <a href=# onclick="addPonto()"><p>Add Ponto</p></a>
  <input type="text" disabled id="pontoTotal">
</div>  

<div>
  <p id="balanco">BALANÇO 0</p>  
</div>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.