Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Div Apagar a Luz dentro de Iframe

Por , em Javascript

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Bom dia pessoal, estou com um problema que eu não estou conseguindo resolver.

 

Seguinte, eu tenho uma pagina index.html, e dentro dessa pagina tem um IFRAME como mostra o código abaixo. 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index Inicial</title>
</head>

<body>

<iframe id="meuIframe" src="indexiframe.html"></iframe>

</body>
</html>

Segue o código da pagina indexiframe.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito Apagar a Luz - JQuery</title>
<script type="text/javascript" src="http://www.linhadecomando.com/apagar_luz/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#opacidade').css('height', $(document).height()).hide();
  $('button').click(function() {
    $('#opacidade').toggle();
 
    if ($('#opacidade').is(':hidden')) {
      $('button').html('Apagar a luz');
    } else {
      $('button').html('Acender a luz');
    }
    });
});
</script>
<style type="text/css">
body{
        background-color:#ffffff;
        font-family:Arial, Helvetica, sans-serif}
 
#botao{
    background-color:#666666;
    color:#FFFFFF;
    cursor:pointer;
    width:250px;
    position:relative;
    display:block;
    z-index:999
}
 
#filme{
    width:250px;
    height:250px;
    margin:0 auto;
    border:#000000 2px solid;
    padding:0;
    position:relative;
    display:block;
    z-index:999;
    background-color:#fff;
}    
 
#opacidade {
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    margin:0; padding:0;
    background:#000;
    opacity:.80;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    z-index: 1;
}
</style>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<p align="center">Exemplo de como fazer um efeito de apagar a luz, usando JQuery</p>
 
<div id="filme" align="center">Teste</div>
<p align="center"><button id="botao">Apagar a luz</button></p>
 
<div id="opacidade"></div>
</body>
</html>

 

Quando eu clicar no botão para apagar a luz quero que a div #OPACIDADE cubra tando a pagina INDEX.HTML e a pagina INDEXIFRAME.HTML.

 

Colocando o código da forma que esta acima, a div #OPACIDADE cobre somente a pagina INDEXIFRAME.HTML, quero que cubra as duas paginas.

 

Alguém poderia me ajudar nessa situação?

 

Att;

Gilberto Jr

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tadeu Barbosa    18

Tadeu Barbosa
Postado

Bom dia.

Você precisa acessar o "pai" do iframe pelo JS.

Usando o parent.document dentro do iframe, mais ou menos algo como isso: 

parent.document.getElementById('overlay').display = block;

Não sei como seria fazer com JQuery, não testei o código.

 

Mas a base seria essa... o seu iframe deveria estar em uma camada acima do overlay com o atributo z-index do CSS. Assim quando desse display:block; no overlay do pai do iframe, ele ficaria visível.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tadeu Barbosa    18

Tadeu Barbosa
Postado

Claro, amigo.

Fiz dois arquivos. O `a.html` é o principal e o `b.html` é o iframe. Vou postar os códigos diretamente aqui:
 

a.html 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>a</title>
	<style>
	.LuzApagada #overlay {
		z-index: 8;
		display: block;
		width: 100%;
		height: 100%;
		top:0; left:0;
		position: fixed;
		background: rgba(0,0,0,.7);
	}
	#iframe {
		z-index: 9999;
		margin: auto;
		left:0; right:0;
		display: block;
		position: absolute;
		border: none;
		width: 800px;
		height: 500px;
	}
	</style>
</head>
<body>
	<div id="container">
		<h1> Hello world! </h1>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mi in malesuada molestie. Aliquam sit amet dignissim nisi, non suscipit arcu. Aenean pharetra consectetur tempor. Sed sollicitudin lobortis quam, sed pharetra sem aliquam ut. Duis justo nunc, mattis in magna id, rhoncus maximus ligula. Aenean sollicitudin ac ipsum in sagittis. Nulla elementum augue vitae mollis gravida. Pellentesque luctus semper turpis feugiat congue. </p>
	</div>

	<div id="overlay"></div>

	<div id="boxmodal">
		<iframe id="iframe" width="100%" height="300" src="b.html"></iframe>
	</div>

	<script>
	// Adiciona um watch ao message do window
	// https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
	window.addEventListener("message", function(evt){
		// Se ele não vier da origin "http://sites" ele não executa
		if(evt.origin==="http://sites") {
			document.body.classList.toggle('LuzApagada');
		}
	}, false);
	</script>
</body>
</html>

 

b.html 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>b</title>
	<style>
		* { box-sizing:border-box; }
		body { background:#FFF; }
		#apagar
		{
			display: block;
			cursor:pointer;
		}
		.LuzApagada #overlay {
			z-index: 8;
			display: block;
			width: 100%;
			height: 100%;
			top:0; left:0;
			position: fixed;
			background: rgba(0,0,0,.7);
		}
		#boxmodal {
			z-index: 9999;
			margin: auto;
			left:0; right:0;
			display: block;
			position: absolute;
			padding: 20px;
			width: 90%;
			height: 90%;
		}
	</style>
</head>
<body>
	<div id="overlay"></div>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mi in malesuada molestie.</p>

	<div id="boxmodal">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/wPT-YdNLxCs" frameborder="0" allowfullscreen></iframe>
		<button id="apagar">Apagar a luz</button>
	</div>

	<script>
	var LuzAcesa = false;
	document.querySelector('#apagar').onclick = function() {
		// Apaga/acende a luz da página
		LuzAcesa    = !LuzAcesa;
		// Altera a classe LuzApagada do elemento `body`
		// Se ele possuir a classe ele remove, senão adicionar
		// https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList
		document.body.classList.toggle('LuzApagada');
		// Altera o texto do botão
		// Não é necessário deixar
		this.innerHTML = (LuzAcesa? 'Acender': 'Apagar') + ' a luz';
		// Envia uma mensagem para o pai
		window.parent.postMessage(LuzAcesa, "http://sites");
	}
	</script>
</body>
</html>

 

Também estão neste gist do github.

 

Talvez existam outras maneiras de se fazer isto, mas foi o que melhor consegui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Estamos quase conseguindo rsrs.

 

Então, ele esta apagando a Luz do jeito que eu quero. Mas quando eu clicar no botão para apagar a luz, a div "LuzApagada" deve ficar acima do IFRAME, tampar a pagina toda. Digamos, tampar a pagina a.html e a b.html.

 

Att;

Gilberto Jr

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tadeu Barbosa    18

Tadeu Barbosa
Postado

Ah! Esqueci de avisar... rsrs

Onde tem `http://sites`, você precisa alterar para o nome do seu domínio. Se estiver no localhost precisa colocar: "http://localhost". :smile:

 

Poderia usar o location.origin, mas não sei como seria quanto à segurança. É melhor escrever o nome mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado
2 horas atrás, Tadeu Barbosa disse:

Ah! Esqueci de avisar... rsrs

Onde tem `http://sites`, você precisa alterar para o nome do seu domínio. Se estiver no localhost precisa colocar: "http://localhost". :smile:

 

Poderia usar o location.origin, mas não sei como seria quanto à segurança. É melhor escrever o nome mesmo...

Mesmo eu colocando essa informação a div LuzApagada não cobre a pagina a.html e a pagina b.html.

 

a.html 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a</title>
    <style>
    .LuzApagada #overlay {
        z-index: 9999;
        display: block;
        width: 100%;
        height: 100%;
        top:0; left:0;
        position: fixed;
        background: rgba(0,0,0,.7);
    }
    #iframe {
        z-index: -1;
        margin: auto;
        left:0; right:0;
        display: block;
        position: absolute;
        border: none;
        width: 800px;
        height: 500px;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1> Hello world! </h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mi in malesuada molestie. Aliquam sit amet dignissim nisi, non suscipit arcu. Aenean pharetra consectetur tempor. Sed sollicitudin lobortis quam, sed pharetra sem aliquam ut. Duis justo nunc, mattis in magna id, rhoncus maximus ligula. Aenean sollicitudin ac ipsum in sagittis. Nulla elementum augue vitae mollis gravida. Pellentesque luctus semper turpis feugiat congue. </p>
    </div>

    <div id="overlay"></div>

    <div id="boxmodal">
        <iframe id="iframe" width="100%" height="300" src="b.html"></iframe>
    </div>

    <script>
    // Adiciona um watch ao message do window
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
    window.addEventListener("message", function(evt){
        // Se ele não vier da origin "http://sites" ele não executa
        if(evt.origin==="http://localhost") {
            document.body.classList.toggle('LuzApagada');
        }
    }, false);
    </script>
</body>
</html>

 

b.html 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>b</title>
    <style>
        * { box-sizing:border-box; }
        body { background:#FFF; }
        #apagar
        {
            display: block;
            cursor:pointer;
        }
        .LuzApagada #overlay {
            z-index: 8;
            display: block;
            width: 100%;
            height: 100%;
            top:0; left:0;
            position: fixed;
            background: rgba(0,0,0,.7);
        }
        #boxmodal {
            z-index: 9999;
            margin: auto;
            left:0; right:0;
            display: block;
            position: absolute;
            padding: 20px;
            width: 90%;
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="overlay"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mi in malesuada molestie.</p>

    <div id="boxmodal">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wPT-YdNLxCs" frameborder="0" allowfullscreen></iframe>
        <button id="apagar">Apagar a luz</button>
    </div>

    <script>
    var LuzAcesa = false;
    document.querySelector('#apagar').onclick = function() {
        // Apaga/acende a luz da página
        LuzAcesa    = !LuzAcesa;

        // Altera a classe LuzApagada do elemento `body`
        // Se ele possuir a classe ele remove, senão adicionar
        // https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList
        document.body.classList.toggle('LuzApagada');

        // Altera o texto do botão
        // Não é necessário deixar
        this.innerHTML = (LuzAcesa? 'Acender': 'Apagar') + ' a luz';

        // Envia uma mensagem para o pai
        window.parent.postMessage(LuzAcesa, "http://localhost");
    }
    </script>
</body>
</html>

 

Att;

Gilberto Jr

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tadeu Barbosa    18

Tadeu Barbosa
Postado

Tente dar um console.log(location.origin) na página fazendo favor e poste o resultado aqui.

Tente colocar no lugar de 'http://localhost' o location.origin.

Não sei o porque de não funcionar...

 

Há muito tempo não uso iframe. Talvez você deva usar um outro tipo de sistema, por exemplo, uma requisição AJAX para buscar o conteúdo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito