Div Apagar a Luz dentro de Iframe

Gilberto Jr · Julho 27, 2017

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

Tadeu Barbosa · Julho 27, 2017

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.

Gilberto Jr · Julho 28, 2017

@Tadeu Barbosa, bom dia;

Se não for pedir demais, poderia mostrar em código como ficaria?

Att;

Gilberto Jr

Tadeu Barbosa · Julho 28, 2017

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.

Gilberto Jr · Julho 28, 2017

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

Tadeu Barbosa · Julho 28, 2017

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...

Gilberto Jr · Julho 28, 2017

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".

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

Tadeu Barbosa · Julho 28, 2017

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.

Gilberto Jr · Julho 28, 2017

coloquei e também não deu certo.

Tadeu Barbosa · Julho 28, 2017

Poste seu código aqui, fazendo favor.

E veja se aparece alguma coisa no console d navegador.

Arquivado

Div Apagar a Luz dentro de Iframe

Recommended Posts

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tadeu Barbosa 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tadeu Barbosa 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tadeu Barbosa 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tadeu Barbosa 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tadeu Barbosa 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Arredondar Valor para cima

PHP - Atualizar INPUT com função moeda

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Fóruns

Tempo Real

Informação importante